d3.js - 仅在没有 svg 标题的情况下开始过渡，而不是在它的情况下开始答案

【问题标题】：d3.js - transition starting only without svg title, not with itd3.js - 仅在没有 svg 标题的情况下开始过渡，而不是在它的情况下开始
【发布时间】：2023-03-09 08:50:02
【问题描述】：

我没有找到直接的答案，如果这个问题在另一个主题中有所不同，请原谅我。

我绘制了一个带有过渡的条形图。我还想添加一个工具提示，显示鼠标悬停时的数据值。使用下面的代码，我设法获得了工具提示或转换，但从来没有将两者放在一起，这是我的目标。

chart.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("fill", function(d) {return colorscale(colorize(d.age));})
.attr("x", function(d) {return xscale(d.name);})
.attr("y", height - 3)
.attr("height", 3)
.attr("width", xscale.rangeBand())

.append("title")
.text(function(d){return d.age;})

.transition()
.duration(1600)
.attr("y", function (d) {return yscale(d.age);})
.attr("height", function (d) {return height - yscale(d.age);}) ;

如果我删除

.append("title")
.text(function(d){return d.age;})

然后我的过渡效果很好。如果我把这两行放在后面，我可以看到我的工具提示，但我失去了我的过渡。

任何建议将不胜感激！

你可以看到结果here

谢谢

【问题讨论】：

设置一个 jsfiddle，这样人们就可以玩你的代码，这让你的问题更容易理解。
谢谢亚当，请记住这一点！

标签： javascript svg d3.js transition

【解决方案1】：

您需要将过渡添加到 rect 而不是 title 元素：

var sel = chart.selectAll(".bar")
  .data(data)
  .enter()
  .append("rect");

sel.append("title")
  .text(function(d){return d.age;});

sel.transition()
  .duration(1600)
  .attr("y", function (d) {return yscale(d.age);})
  .attr("height", function (d) {return height - yscale(d.age);}) ;

【讨论】：