Javascript 从二维坐标到d3路径

我有一个非常简单的二维坐标数组：

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

---

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

结果是我需要附加一条多段线（而不是路径）。新代码如下所示：

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

您是否尝试过附加“行”而不是路径？