d3 2D坐标的路径

Question

我有一个非常简单的2D坐标数组：

var coordinates = [
  [604.7310455995042, 115.27748481418433],
  [594.9394166746309, 138.04706103903246],
  [593.3235260428826, 141.29518868919428],
  [601.1748803199138, 113.56055089802518]
];

我想做的是在所有这些点之间画一条简单的线。在线查看不同的示例使得看起来这很容易，但我仍然会遇到错误。这就是我所拥有的：

var XYPoints = d3.selectAll("#XYPoints")
    .append("svg")
    .attr("width", 720)
    .attr("height", 465);

var line = d3.svg.line()
        .interpolate("linear")
        .x(function(d) { return d[0]; })
        .y(function(d) { return d[1]; });

XYPoints.selectAll("line")
    .data(coordinates)
    .enter().append("path")
    .attr("class", "line")
    .attr("d", line);

我得到的错误是，错误：属性d =“MNaN，NaNLNaN，NaN”的值无效。有谁知道为什么会发生这种情况（以及如何修复它）？

Answer 1

事实证明我需要附加折线（而不是路径）。新代码如下所示：

XYPoints.append("polyline")      
    .style("stroke", "black") 
    .style("fill", "none")    
    .attr("points", coordinates);