d3.js嵌套选择，不起作用

Question

So this is my code, I have an array of arrays, and they contain an object with 4 points, so I can draw a line using svg, when I tested the code using only an array it worked fine, but I can't make it work with an array of arrays, any help would be deeply appreciated.

var circle = svgContainer.selectAll("svg").data(mainMt);
 console.log(circle);
 console.log("Linea");
 var line = circle.data(function(d) { return d; })
.enter().append("line")
                      .attr("x1", function (d) { return d.x1; })
                      .attr("y1", function (d) { return d.y1; })
                      .attr("x2", function (d) { return d.x2; })
                      .attr("y2", function (d) { return d.y2; })
                      .attr("stroke-width", 2)
                      .attr("stroke", "black");

                      console.log(line);

Answer 1

There are two things missing -- first, you need to operate on the enter selection of the top-level selection and second, select things for the nested selection:

svgContainer
  .selectAll("g.lines")
  .data(mainMt)
  .enter().append("g")
  .attr("class"‌​, "lines")
  .selectAll("line").data(function(d) { return d; })
  .enter()
  .append("line")
  ...