无法创建SVG组

Question

使用d3.js，我尝试创建一系列SVG组（即<g>个元素），并为数据数组中的每个数字添加<g>元素。每个<g>元素本身应包含<rect>和<text>。以下代码在我看来应该这样做，但当我检查<svg>元素（在Chrome和Firefox中）时，它直接包含<rect>个元素和<text>元素{1}}元素，看不到<svg>元素。

HTML页面最初只包含一个空的<g>元素。 <svg>只是一个简单的数字数组。

var svg = d3.select("svg");

svg.selectAll("g")
    .data(dataset)
    .enter()
    .call( function(g) {
        g.append("rect")
            .attr("x", (d, i) => xScale(i))
            .attr("y", d => h - yScale(d))
            .attr("width", xScale.rangeBand())
            .attr("height", d => yScale(d))
            .attr("fill", d => "rgb(0,0," + (d*10) + ")")
            .on('click', d => console.log(d))
            .on('mouseover', function() {
                d3.select(this)
                    .attr('fill', 'orange');
                })
            .on('mouseout', function(d) {
                d3.select(this)
                    .transition()
                    .duration(250)
                    .attr("fill", d => "rgb(0,0," + (d*10) + ")")
                });
        })
    .call( function(g) {
        g.append('text')
            .text(d => d)
            .attr('class','label')
            .attr("x", (d, i) => xScale(i) + xScale.rangeBand() / 2)
            .attr("y", d =>  h - yScale(d) + 14);
        });

Answer 1

我发现了我的问题。我认为selectAll('g').data(dataset).enter()会导致<g>元素与我创建的dataset中的数据不匹配。但它们不是，并且在调用.append('g')之后添加.enter()以实际创建缺少的<g>元素是必要的。之后，.call(...)调用的函数将传递新的<g>元素。