在Javascript中添加标题无效转换动画

我正在尝试添加transition（）和append（“title”），以便在散点图上同时在工具提示上显示动画和鼠标悬停。但当我添加转换时，工具提示不再弹出

 const circles = g.merge(gEnter).selectAll('circle').data(data);
  
  circles
    .enter().append('circle').merge(circles).transition().duration(2000)
      .attr('cy', d => yScale(yValue(d)))
      .attr('cx', d => xScale(xValue(d)))
      .attr('r', d => (d.Score*1.29)+1)
      .attr("fill", d=>colorArray(d.Type))
      .append("title").text(d => (d.Country_or_region+ "\n" +"Rank: "+ d.Overall_rank))

---

.transition（）

之后的所有内容都是转换，没有用于转换的

.append（）

方法。如果您检查控制台，可能会看到错误

也就是说，如果出于任何原因，您只想在转换开始后附加

标题

，则可以使用

.on（“开始”）

方法：

.on("start", function() {
    d3.select(this).append("title").text("foo")
})

这是演示，开头没有标题。过渡开始后，将鼠标悬停在圆圈上时，您将获得标题：

const circle=d3.选择（“圆”）；
圆。过渡（）
.持续时间（20000）
.延迟（2000年）
.attr（“cx”，100）
.on（“开始”，函数（）{
d3.选择（本）。附加（“标题”）。文本（“foo”）
})