Question

我有两个用几乎相同的d3代码编写的条形图。

单击＆＃34;转移后＃34;时，条形移动，白色数字会改变。

在这个垂直条的CodePen中，它可以工作。 VERTICAL BAR CHART

在这个横条的CodePen中，它不起作用。 HORIZONTAL BAR CHART

任何人都可以帮我调试吗？我很难过......

CODE FOR VERTICAL BAR LABELS
var drawNewlabels = svg.selectAll("text")
.data(dataset)
.text(function(d) {return d;})
.attr('opacity',0)
.attr("x", function(d, i) {return xScale(i) + xScale.rangeBand() / 2;})
.attr("y", function(d) {return h - yScale(d) + 14;});
drawNewlabels.transition().delay(1000).duration(500)
.attr('opacity',1)

CODE FOR HORIZONTAL BAR LABELS
var drawNewlabels = svg.selectAll("text")
.data(dataset)
.text(function(d) {return d;})
.attr('opacity',0)
.attr("y", function(d,i) {return yScale(i) + (yScale.rangeBand() / 2) + 4;})
.attr("x", function(d) {return xScale(d) + 14;})
drawNewlabels.transition().delay(1000).duration(500)
.attr('opacity',1)

Answer 1

鼠标事件导致错误，这是一个有效的代码笔http://codepen.io/leighquince/pen/JAFmt

也没有必要重新发布它们，因为当你第一次声明它们时，听众仍然在矩形上。

哦我也从

中删除了-512

  .attr("x", function(d) {return xScale(d) -512;})

并将其替换为

  .attr("x", function(d) {return xScale(d) -20;})

以便文本显示在栏的末尾

使用新数据集时，为什么条形图上不显示d3文本？

1 个答案: