D3不是從對象列表中渲染圖形？

Question

我一直在遇到以下幾段代碼的問題。我嘗試了很多東西，並且高低地尋找答案，但無濟於事。這是我想得出數據：https://gist.github.com/caffinatedmonkey/5714631

它的格式如下：

{ 
    "x":[1,2,3,4,5,6,7], 
    "y":[8,9,10,11,12,13,14] 
} 

它與JSONLint符合驗證工具，所以我敢肯定的數據是不是問題。

與代碼中的要點是在這裏：https://gist.github.com/caffinatedmonkey/5714631

在這個應用中我已經使用JavaScript庫的d3.v3.min.js。我想知道如何用D3繪製這些數據，如果可以的話，怎麼樣？

Answer 1

d3在使用一組對象時效果最佳。我建議重組原始數據，所以它看起來是這樣的：

[{x:1, y:2}, {x:2, y:100}, {x:3, y: 321}, ect}] 

眼下，

.selectAll("li") 
.data(data) 

的數據陣列的每個元素加入到「禮」元素。由於數據如下所示：

[ 
    "x":[1, 2, 3, ect], 
    "y:[2, 100, 321, ect] 
] 

只有兩個元素可以連接，「x」和「y」。當您嘗試查找每個元素x屬性時，

.text(function (d, i){ 
     console.log(d.x[i]); 

它不存在，因爲'd'只是一個數組。

Answer 2

由於d3與對象和數組最好效果最好重構原始數據。如果重構原始數據不是一種選擇，您可以在運行時即時重新構造數據。 The code in this fiddle should do the trick.

如果您不想更改數據，您還可以按原樣使用它，如果更改某些零件腳本。而不是通過data到.data()函數通過data.x或data.y。如果你這樣做，你可以看看相應的元素data.x[i]Here is a fiddle demonstrating this.