1

我用 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);
4

1 回答 1

1

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

避免此问题的最简单方法是使用您已经分配给text选择中的元素的类。那是，

svg.selectAll("text")

会成为

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

这意味着第二个选择将是空的，因为有text元素，但不是该特定类，其余代码将按预期工作。

在这里完成 jsfiddle 。

于 2013-09-07T15:42:31.117 回答