无法创建SVG组

Question

使用D3.js，我试图创建一系列SVG组（即 元素），数据数组中的每个数字都有一个 元素。每个 元素本身应该包含一个 和一个 。在我看来，下面的代码应该做到这一点，但当我检查 元素（在Chrome和Firefox中都是如此）时，它直接在 元素中包含 元素和 元素，而看不到 元素。

HTML页面最初只包含一个空的 元素。数据集只是一个简单的数字数组。

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()会导致 元素与为我创建的dataset中的数据不匹配。但它们不是，而且有必要在调用.Enter()之后添加.append('g')来实际创建缺少的 元素。之后，将向.call(...)调用的函数传递新的 元素。