新手d3.SelectAll（“ g”）-有效，但是没有“ g”元素

Question

通过d3教程来创建简单的条形图，这没有意义...

第1步-添加SVG标签。好吧...

第2步-我可以看到它正在为每个数据元素创建一个组“ g”，但是为什么要执行graph.selectAll（“ g”）。截至目前，我的想法是只有一个SVG标签，因此不会返回任何内容。

有人可以启发我说graph.selectAll（“ g”）到底在做什么吗？所有评论表示赞赏！

      

     var width = 300 
        scaleFactor = 20, 
        barHeight = 30;

     var data = [10, 5, 12, 15];

     var graph = d3.select("body") -- makes sense, add an SVG element
        .append("svg")               
        .attr("width", 300)
        .attr("height", 300);

     var bar = graph.selectAll("g")  -- ??? there are no "g" elements
        .data(data)
        .enter()
        .append("g")
        .attr("transform", function(d, i) {
           return "translate(0," + i * barHeight + ")";
        });
     bar.append("rect").attr("width", function(d) {
        return d * scaleFactor;
     })

     .attr("height", barHeight - 1);

     bar.append("text")
        .attr("x", function(d) { return (d*scaleFactor); })
        .attr("y", barHeight / 2)
        .attr("dy", ".35em")
        .text(function(d) { return d; });

  </script>