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

Question

我没有找到对此问题的直接答案，如果其他主题对此有不同的介绍，请原谅我。

我绘制了一个带有过渡的条形图。我还想添加一个工具提示，显示鼠标悬停时的数据值。 使用下面的代码，我成功地获得了工具提示或过渡，但从未同时获得两者，这是我的目标。

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

谢谢

Answer 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);}) ;