D3.js 用数据数组绘制线条路径

Question

我有一个行路径，它接受这样的数组数组：

[[{x:0,y:1},{X:3,y:4],[{x:0,y:2},{x:3,y:6},{x:8,y:10}]]

我的线路路径如下所示：

this.line = D3['line']()
            .x(function (d) {console.log(d); return d.x; })
            .y(function (d) {console.log(d); return d.y; });

这工作得很好，现在我想修改我的数据，以便我可以包含每个数据的填充和文本，因此我将数据格式更改为如下所示。

[{"data":[{x:0,y:1},{X:3,y:4]}
,"fill":"red","txt":"test","x":"0","y":0},
{data:[{x:0,y:2},{x:3,y:6},{x:8,y:10}],"fill":"red","txt":"test","x":"0","y":0}
]

然后我修改线路径看起来像这样：

this.line = D3['line']()
            .x(function (d) {console.log(d); return d.data.x; })
            .y(function (d) {console.log(d); return d.data.y; });

看起来因为数据是一个对象而不是一个数组，所以它不会得到路径的循环。 我检查了 DOM，确实创建了路径，只是路径数据从未填充过。 该代码从未执行过在 obj:[] 中的行路径。 我如何将数组传递给它？

谢谢

Answer 1

好的，在搞砸了一堆不同的事情之后，我就是这样做的，我必须像这样将 d.data 传递到 line 函数中。

.attr("d",function(d){return self.line(d.data)})