d3-如何為路徑對象添加顏色

Question

我正在做一個項目，在此項目中，折線圖的特定部分要根據其值進行不同的着色。 我是積極的，因為我可以更改工具提示的文本顏色以匹配我想要的顏色，所以顏色功能有效。 但是，我無法使線本身改變顏色。 我很確定我缺少關於d和數據之間區別的一些見解...

以下是相關代碼：

 var valueline = d3.svg.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.avgs); }); d3.csv("https://gist.githubusercontent.com/emcmahon013/850af022a2d9adc4b82a/raw/f2b553737d3772a206dd3b280366c61d301a141c/temp.csv", function(error, data) { data.forEach(function(d) { d.date = parseDate(d.date); d.phase= color(d.phase); d.avgs = +d.avgs; }); // Scale the range of the data x.domain(d3.extent(data, function(d) { return d.date; })); y.domain([40, d3.max(data, function(d) { return d.sensor; })]); // Add the valueline path. lineSvg.append("path") // ********** .attr("class", "line") .attr("d", valueline(data)) .attr("stroke",function(data){return d.phase;}) //THIS IS THE PROBLEM! .attr("stroke-width",2); 

此外，以下代碼不起作用：

 .attr("stroke",function(data){return data.phase;}) 

我可以放置一個能起作用的色塊功能。 如果d [i]值（其中i =我的索引）對應於紅色，則將顯示為紅色，如果對應於藍色，則將顯示為藍色。 我只是不知道如何獲取i值並使之動態。 請幫忙！

  .attr("stroke",function(data) {return colorblock();} function colorblock() { d=data[0]; //will return red line return d.phase; } function colorblock() { d=data[310]; //will return blue line return d.phase; } 

Answer 1

您已正確識別出存在問題的線路。 您正在使用未定義的變量。

原版的：

.attr("stroke",function(data){return d.phase;}) //THIS IS THE PROBLEM!

您可能想要的是：

.attr("stroke",function(data){return data.phase;}) //THIS IS THE SOLUTION!