Question

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

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

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

d3.js - 仅在没有svg标题的情况下开始转换，而不是使用它

1 个答案: