javascript - 根据数据更改线形图的颜色(红色表示阈值高于0，红色表示阈值低于0，蓝色)

我正在研究一个基于对象温度来中继图形的问题。
目的是在对象温度高于0时以红色显示折线图的部分，而在温度低于0时以蓝色显示折线图的部分。

该图与此处可用的图非常相似。
http://bl.ocks.org/pranitar/01305d9ad0eba73dbf80

我可以更改颜色，但不能将其限制在阈值以上或以下的部分。取而代之的是，当实时输入值时，整个图形将变为红色或蓝色。请注意，该图是动态图，这意味着将数据实时提供给图，并且该图将随着时间推移而不断变化以显示折线图。

任何帮助，将不胜感激。

我只使用JS和CSS。请没有其他框架建议。

最佳答案

在对d3进行了很多（近4个小时）摆弄后，确定了这种情况的解决方案。我需要添加的只是线条的渐变，并定义渐变将更改线条颜色的颜色和x / y值。

这是我进行此更改后得到的示例。

https://cdn.rawgit.com/jasmeetsinghbhatia/Roll-A-Ball-3D/2ce001fa/color%20graph%20for%20threshold%20speed%202.mov

这是相同的示例代码。

添加到CSS：

.graph .group {
          fill: none;
          stroke: url(#line-gradient);
          stroke-width: 1.5;
      }

添加到图中：

svg.append("linearGradient")
               .attr("id", "line-gradient")
               .attr("gradientUnits", "userSpaceOnUse")
               .attr("x1", 0).attr("y1", y(0))
               .attr("x2", 0).attr("y2", y(2))
               .selectAll("stop")
               .data(
                      [
                       {offset: "100%", color: "blue"},
                       {offset: "100%", color: "red"},
                      ]
                    )
                .enter().append("stop")
                        .attr("offset", function(d) { return d.offset; })
                        .attr("stop-color", function(d) { return d.color; });

要全面了解运行中的图表：
https://github.com/jasmeetsinghbhatia/Roll-A-Ball-3D/blob/master/Assets/StreamingAssets/Tests/speed-ball-graph.html

关于javascript - 根据数据更改线形图的颜色(红色表示阈值高于0，红色表示阈值低于0，蓝色)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45805857/