d3 Path from 2D coordinates

Question

I have a very simple 2D array of coordinates:

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

What I would like to do is draw a simple line between all of these points. Looking at different examples online makes it seem like this would be easy, but I continue to get an error. Here's what I have:

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

The error I get says, Error: Invalid value for attribute d="MNaN,NaNLNaN,NaN". Does anyone know why this would happen (and how to fix it)?

Answer 1

It turns out that I needed to append a polyline (instead of a path). The new code looks like this:

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