javascript - d3 barplot - 为什么标签不显示？

Question

我用 D3 画了一个条形图。我希望 x 轴值位于底部，y 值位于其本身的条形图上。

由于某种奇怪的原因，标签没有显示。

任何人都可以看一下this fiddle，我将不胜感激.

最后的相关部分

// why isnt this showing ??? <-------------------------- right here
// price tags on the bars
svg.selectAll("text")
 .data(y)
 .enter()
 .append("text")
 .text(function(d ,i) { return Math.round(y[i]).toLocaleString() ;}) 
 .attr("y" , function(d) { return height - yscale(d);})
 .attr("x" , function(d, i) { return i * (bar_width + spacing) + bar_width / 4})
 .classed("analysis-result-label" , true);

Answer 1

由于您选择和匹配数据的方式，标签未显示。每次调用 .data() 时，D3 都会将您在之前步骤中所做选择的内容与您作为参数传递的数据进行匹配。对于第二组标签，您选择 text 元素。该选择将包含您之前刚刚添加的元素。每个数据项都有一个匹配的 DOM 元素，因此 .enter() 选择将为空。因此没有添加任何内容。

避免此问题的最简单方法是使用已分配给所选内容中的 text 元素的类。也就是说，

svg.selectAll("text")

会变成

svg.selectAll("text.analysis-result-label")

这意味着第二个选择将为空，因为存在 text 元素，但不属于该特定类，并且其余代码将按预期工作。

完整的jsfiddle here .