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

【问题标题】：Why isn't d3 text appearing on bar chart when using new dataset?为什么使用新数据集时条形图上不显示 d3 文本？
【发布时间】：2014-08-28 17:32:30
【问题描述】：

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

当您点击“转账后”时，条形会移动，白色数字会发生变化。

在这个由竖线组成的 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)

【问题讨论】：

您好，您正在寻找以下答案吗？

标签： javascript d3.js charts bar-chart

【解决方案1】：

鼠标事件导致错误这里是一个工作代码笔http://codepen.io/leighquince/pen/JAFmt

也没有必要重新声明它们，因为从您第一次声明它们时起，侦听器仍在矩形上。

哦，我也从

中删除了 -512

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

并将其替换为

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

使文本出现在栏的末尾

【讨论】：