使用d3繪制路徑？

Question

我正在嘗試使用d3生成路徑並按數據集設置顏色。 路徑的顏色由“ Req”設置，繪制路徑由點集設置，但是在獲取數據時我遇到了一些解析問題。 我的數據格式如下所示。

var feature = {"section":[
  {"ID": 1,"Req": 10,"Name": "Jame","point": [{"x": 1,"y": 1},{"x": 5,"y": 5},{"x": 20,"y": 30},{"x": 200,"y": 200}]},
  {"ID": 2,"Req": 20,"Name": "John","point": [{"x": 1,"y": 1},{"x": 7,"y": 10},{"x": 100,"y": 10},{"x": 20,"y": 200}]}  
]};

為了獲得數據集中的x和y坐標，我具有以下行生成器的功能：

var line = d3.svg.line()
     .interpolate("linear")
     .x(function(d) { d.point.forEach(function(a){ return a.x;});})
     .y(function(d) { d.point.forEach(function(a){ return a.y;});});

我在數據集中將路徑的樣式顏色設置為“ Req”。

canvas.selectAll("path")
    .data(feature.section)
    .enter()
    .append("path")
    .attr("d", line(feature.section))
    .attr("fill", "none")
    .style("stroke", function(d) {
       var returnColor;
       if (d.Req > 5){returnColor ="green";}
       else if (d.Req > 10){returnColor ="purple";}
       else if (d.Req > 15){returnColor ="red";}
       else{returnColor = "#ccc";}
       return returnColor;
    });

但是我沒有在屏幕上顯示任何線條。 調試控制台始終顯示錯誤：解析d =“ MNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaN”時出現問題。

我錯過了什么？

您還可以在http://jsfiddle.net/agadoo/RZQxV/上看到我的代碼示例。

Answer 1

看來您要畫幾條路徑，每個請求ID一條。 在這種情況下，您需要的是嵌套選擇 。

要繪制路徑，您需要將一個數組傳遞給.data()函數，並在d3.svg.line()定義中提供x和y函數，以從該數組的每個元素中提取相關數據。 也就是說，您在此處指定的函數應返回恰好一個點的x和y坐標。 因此，您將其更改為類似

.x(function(d) { return d.x; })

我在這里修改了您的jsfiddle。 請注意，在這種情況下，您無法再以與以前相同的方式獲得線條的顏色，因為該數據在該級別上不可用。 有多種方法可以解決此問題，最直接的方法可能是重新格式化數據。 d3數組函數（特別是d3.nest()函數 ）在這里應該會有所幫助。

最后，設置線條顏色的檢查無法按預期進行。 d.Req > 5為真，如果d.Req > 10 ，所以你的第二個和第三個條件永遠不會，因為他們已經被第一個覆蓋滿足。