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")，那么当附加数据时，输入选择将包含新的文本标签。