Добавление анимации перехода заголовка void в Javascript

Question

Я пытаюсь добавить 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))

Answer 1

Все, что находится после .transition(), является переходом , и нет метода .append() для перехода. Если вы проверите консоль, вы, вероятно, увидите ошибку.

Тем не менее, если по какой-либо причине вы хотите добавить title только после начала перехода, вы можете использовать метод .on("start"):

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

Вот демо, в начале нет названия. После начала перехода при наведении курсора на кружок вы получите заголовок:

const circle = d3.select("circle");
circle.transition()
  .duration(20000)
  .delay(2000)
  .attr("cx", 100)
  .on("start", function() {
    d3.select(this).append("title").text("foo")
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
  <circle r="20" cx="20" cy="100"></circle>
</svg>