javascript - selectAll ("g").data(data).enter().append ("g") 不起作用？

Question

由于某种原因，

chart.selectAll("g").data(data).enter().append("g")

不起作用，但是

chart.selectAll("rect").data(data).enter().append("rect")

确实有效。我所说的“work”，是指由 chart 表示的元素最终包含许多“rect”/”g，每个数据项一个。第二行导致元素最终包含许多 rect，但如果使用 g 则不会出现任何内容。为什么从 rect 简单更改为g 会导致错误吗？

代码:

var chart  = svg.append("g")
                  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // setup chart axis.
        chart.append("g")
              .attr("class", "x axis")
              .call(xAxis);

          chart.append("g")
              .attr("class", "y axis")
              .call(yAxis)
            .append("text")
              .attr("transform", "rotate(-90)")
              .attr("y", 6)
              .attr("dy", ".71em")
              .style("text-anchor", "end")
              .text(yLabel);

    // Pertinent code here    
    var rows = chart.selectAll("g").data(data).enter().append("g");

Answer 1

不确定你想要什么，但是:

如果你想要这样的东西:

svn 
  g //one g for every data row
  g //y axis
  g //x axis

那么这样的事情应该有效:

var chart  = svg
var chartLines = chart
 .append("g")
 .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
 .attr("class", "line");

// setup chart axis.
    chart.append("g")
          .attr("class", "x axis")
          .call(xAxis);

      chart.append("g")
          .attr("class", "y axis")
          .call(yAxis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text(yLabel);

// Pertinent code here    
var rows = chart.selectAll(".line").data(data).enter().append("g");