無法創建SVG組

Question

使用d3.js，我試圖創建一系列SVG組（即<g>元素），併爲數組數組中的每個數字創建一個<g>元素。每個<g>元素本身應該包含<rect>和<text>。下面的代碼在我看來應該這樣做，但是當我檢查<svg>元素（在Chrome和Firefox中）時，它包含<rect>元素和<text>元素，它們直接位於<svg>元素內，沒有看到<g>元素。

HTML頁面最初只包含一個空的<svg>元素。 dataset只是一個簡單的數字數組。

 
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中的數據不匹配。但他們不是，在致電.enter()之後，需要添加.append('g')以實際創建缺失的<g>元素。之後，.call(...)調用的函數將通過新的<g>元素。