用d3繪製路徑？

我正在嘗試使用d3生成路徑並通過數據集設置顏色。路徑的顏色由「Req」設置，並通過一組點來繪製路徑，但是在獲取數據時我會遇到一些解析問題。我的數據格式如下所示。用d3繪製路徑？

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;});});

如下我設置與數據集「請求」的價值路徑的風格色彩。

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/

來源

2013-03-09 Sean

我這個代碼的例子看起來像你試圖繪製幾條路徑，每個請求ID。你在這種情況下需要的是nested selections。

繪製路徑，你會傳遞一個數組到.data()功能，給x和y功能在您的d3.svg.line()定義從陣列中的每個元素提取相關數據。也就是說，您在那裏指定的功能應該返回x和y座標精確到一個點。所以，你會改變他們能夠像

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

我已經修改了的jsfiddle here。請注意，在這種情況下，您無法像使用相同的方式獲取線條的顏色，因爲該數據在該級別不可用。有幾種方法可以解決這個問題，最簡單的方法可能是重新格式化數據。 d3陣列功能（特別是d3.nest() functions）在這裏應該很有幫助。

在最後一個注意事項上，設置線條顏色的檢查將無法按預期進行。 d.Req > 5將是真實的，如果d.Req > 10，所以你的第二個和第三個條件將永遠不會被滿足，因爲它們已經被第一個覆蓋。

來源

2013-03-09 12:09:31

非常感謝你，我會嘗試嵌套功能。 – Sean 2013-03-10 09:57:53

用d3繪製路徑？

回答

相關問題