根据数据更改线图的颜色（红色表示高于阈值 0 ，蓝色表示低于 0 ）

Question

我正在研究一个根据物体温度中继图表的问题。目标是在物体温度高于 0 时以红色显示折线图部分，在低于 0 时以蓝色显示折线图部分

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

我可以更改颜色，但不能将其限制为高于或低于阈值的线条部分。相反，当实时输入值时，整个图表会变为红色或蓝色。请注意，该图表是动态图表，这意味着数据是实时提供给图表的，并且图表会随着时间的推移不断移动以显示折线图。

任何帮助，将不胜感激。

我只使用 JS 和 CSS。请不要提供额外的框架建议。

Answer 1

好吧，在对 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