为什么不是'当使用新数据集时，条形图上出现的d3文本

Why isn't d3 text appearing on bar chart when using new dataset?

本文关键字：条形图 文本 d3 数据集 为什么不      更新时间：2023-09-26

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

当您点击"After Transfers"（转移后）时，条形图会移动，白色数字也会改变。

在这个垂直条的CodePen中，它是有效的。垂直条形图

在这个水平条的CodePen中，它不起作用。水平条形图

有人能帮我调试吗？我被难住了。。。

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)

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

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

哦，我还从中删除了-512

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

并将其替换为

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

以便文本出现在条的末尾

相关文章：