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