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

【问题标题】：change color of line graph based on data (red for above threshold of say 0 , and blue for below 0)根据数据更改折线图的颜色（红色表示高于 0 的阈值，蓝色表示低于 0 的阈值）
【发布时间】：2017-08-21 21:34:57
【问题描述】：

我正在解决一个问题，以根据物体的温度传递图表。目标是在物体温度高于 0 时以红色显示线图部分，在低于 0 时显示蓝色

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

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

任何帮助将不胜感激。

我使用的只是 JS 和 CSS。没有额外的框架建议，请。

【问题讨论】：

（请注意，您的示例使用的是 d3，它不是纯 js/css）。在示例中，只有一个 <path> 元素，您要做的是使用正确的 css 类将数据拆分到不同的 <path> 中，以便获得正确的颜色。（我不知道怎么做，但这是一个想法）
感谢@ValLeNain。我找到了解决方案。阅读 D3 文档会有所帮助。

标签： javascript css

【解决方案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

【讨论】：