Javascript d3条形图-为什么不显示标签?

Javascript d3条形图-为什么不显示标签?,javascript,d3.js,Javascript,D3.js,我用D3画了一个条形图。 我想在底部有x轴值,在条上有y轴值 由于一些奇怪的原因,标签没有显示出来 如果有人能看一下,我将不胜感激 最后请参阅中的相关章节 // why isnt this showing ??? <-------------------------- right here // price tags on the bars svg.selectAll("text") .data(y) .enter() .append("text") .text(function(

我用D3画了一个条形图。 我想在底部有x轴值,在条上有y轴值

由于一些奇怪的原因,标签没有显示出来

如果有人能看一下,我将不胜感激

最后请参阅中的相关章节

// 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);

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

避免此问题的最简单方法是使用您已经分配给所选内容中
文本
元素的类。就是

svg.selectAll("text")
将成为

svg.selectAll("text.analysis-result-label")
这意味着第二个选择将是空的,因为有
text
元素,但不属于该特定类别,其余代码将按预期工作


完成JSFIDLE。

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

避免此问题的最简单方法是使用您已经分配给所选内容中
文本
元素的类。就是

svg.selectAll("text")
将成为

svg.selectAll("text.analysis-result-label")
这意味着第二个选择将是空的,因为有
text
元素,但不属于该特定类别,其余代码将按预期工作


完成jsfiddle。

谢谢。我得到了它。我花了一段时间才掌握enter()函数的窍门。。。一步一个脚印,谢谢。我得到了它。我花了一段时间才掌握enter()函数的窍门。。。一步一个脚印。