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。

d3 barplot - 为什么标签没有显示？

1 个答案: