如何从d3.svg.line切换到允许不同颜色段的选项？

Question

是否可以使用d3.svg.line轻松绘制折线图，​​以便您可以单独指定每个线段的颜色？或者d3.svg.line允许这种控制的插槽替换？

我的起点基本上就是这个例子： https://gist.github.com/mbostock/1642874

我先试了这个：

var line = d3.svg.line()
.x(function(d, i) { return x(i); })
.y(function(d, i) { return y(d.v); })
.style("stroke",function(d){return d>0?"#f00":#0f0";})
;

但它找不到功能投诉。

然后我尝试了：

var path = svg.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.data([data])
.attr("class", "line")
.style('stroke',function(d,i){return (d>0?'#f00':'#0f0');})
.attr("d", line)
;

但那只是给了我所有的绿线（原来d不是我的数据）。

这是几年前的a similar question，其中写着“不是现在，也许很快”。我尝试查看像this和this这样很酷的示例，但无法弄清楚如何将代码与我的代码相关联。

Answer 1

简短的回答是否定的，没有直接替换。您可以使用两种方法制作具有不同颜色段的线条。

1. 分别创建线段。
2. 使用带有硬止挡的渐变填充来创建不同段的错觉。

对于前者，this question给出了更多详细信息，这是一个非常好的答案。后一种方式我在this visualisation中使用过。