D3：無法將文本元素添加到圖表

Question

除文本元素外，一切似乎都按預期工作。我似乎無法獲得文本元素追加到我的g元素。這是我的代碼到目前爲止。我在Chrome瀏覽器中檢查過DOM，但沒有看到任何文本元素，我不知道爲什麼。我正在使用這個網站作爲一種指導：https://www.dashingd3js.com/svg-text-element。

此外，我知道元素應該彼此堆疊，因爲它們都共享相同的x和y位置，我只是試圖讓元素先出現。

var svg = d3.select('svg'), 
margin = {top: 60, right: 20, bottom: 45, left: 60}, 
width = +svg.attr("width") - margin.left - margin.right, 
height = +svg.attr("height") - margin.top - margin.bottom; 

var x = d3.scaleBand().rangeRound([0, width]).padding(.1); 
var y = d3.scaleLinear().range([height, 0]); 

var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
x.domain(test.map(function(d) { return d.level; })); 
y.domain([0, d3.max(test, function(d) { return d.time; })]); 

g.append("g") 
    .attr("class", "axis axis--x") 
    .attr("transform", "translate(0," + height + ")") 
    .attr("writing-mode", "tb-rl") 
    .call(d3.axisBottom(x).tickSize(0).tickPadding(10)); 

g.append("g") 
    .attr("class", "axis axis--y") 
    .call(d3.axisLeft(y).ticks(10)) 
    .append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 9) 
    .attr("dy", "0.71em") 
    .attr("text-anchor", "end") 
    .text("Frequency") 

g.selectAll(".bar") 
    .data(test) 
    .enter() 
    .append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { return x(d.level); }) 
    .attr("y", function(d) { return y(d.time); }) 
    .attr("width", x.bandwidth()) 
    .attr("height", function(d) { return height - y(d.time); }) 

var text = g.selectAll("text") 
    .data(test).enter() 
    .append("text"); 

var textLabels = text.attr("x", 100) 
    .attr("y", 100) 
    .text("testing") 
    .attr("fill", "blue") 

Answer 1

選擇將包括您附加到前面的代碼g組件軸的文字，讓你的「輸入」不會有任何東西。 D3將傳入和數據與選擇中的項目進行比較，如果不指定密鑰，則會對每個元素的數量進行簡單比較，然後相應地添加（輸入）和移除（退出）。

如果您將選擇更改爲DOM中尚不存在的選項（例如空的選擇），例如g.selectAll(".label")，那麼當附加數據時，輸入選擇將包含新的文本標籤。