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

在这个应用程序中，我使用了d3.v3.min.js javascript库。我想知道如何用D3绘制这些数据，如果是这样的话？

Answer 1

d3在处理对象数组时效果最佳。我建议重组你的原始数据，看起来像这样：

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

现在，

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

将数据数组的每个元素连接到'li'元素。由于数据如下所示：

[
    "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.

查看相应的元素