D3.js 无法创建SVG组

使用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); }); var svg=d3.选择（“svg”）； svg.selectAll（“g”） .数据（数据集） .输入（） .调用（函数（g）{ g、 附加（“rect”） .attr（“x”，（d，i）=>xScale（i）） .attr（“y”，d=>h-yScale（d）） .attr（“宽度”，xScale.rangeBand（）） .attr（“高度”，d=>yScale（d）） .attr（“填充”，d=>“rgb（0,0，+（d*10）+”）） .on（'click'，d=>console.log（d）） .on（'mouseover'，function（）{ d3.选择（本） .attr（“填充”、“橙色”）； }) .on（'mouseout'，函数（d）{ d3.选择（本） .transition（） .持续时间（250） .attr（“填充”，d=>“rgb（0,0，+（d*10）+”）） }); }) .调用（函数（g）{ g、 追加（'文本'） .text（d=>d） .attr（'class'，'label'）） .attr（“x”，（d，i）=>xScale（i）+xScale.rangeBand（）/2） .attr（“y”，d=>h-yScale（d）+14）； });

---

我发现了我的问题。我认为

selectAll（'g'）.data（dataset）.enter（）

会导致为我创建与

dataset

中的数据不匹配的

元素。但是它们不是，并且有必要在调用

.enter（）

之后添加

.append（'g'）

，以实际创建缺少的

元素。之后，

.call（…）

调用的函数将被传递给新的

元素