Угловая подсказка для размещения d3js в зависимости от положения дуги с переходом

Question

Я создал кольцевую диаграмму и сейчас пытаюсь создать для нее всплывающую подсказку. Я следовал простому учебнику и создал всплывающую подсказку, но я бы хотел ее изменить.

Я просмотрел несколько похожих сообщений ( D3.js: позиционировать всплывающие подсказки, используя положение элемента, а не положение мыши? ), но мне не удалось достичь своей цели.

Структура моей круговой диаграммы следующая

app-pie-chart
 -host
    -svg.pie-chart
    -div.legend
    -div.tooltip

и код моей подсказки в настоящее время выглядит следующим образом:

   setTooltip(path: any) {
    d3.selectAll('.tooltip').remove();

    const self = this;
    this.tooltip = d3
      .select('.host')
      .append('div')
      .attr('class', 'tooltip');

    this.tooltip.append('div').attr('class', 'tooltip-label');
    this.tooltip.append('div').attr('class', 'tooltip-value');
    this.tooltip.append('div').attr('class', 'tooltip-percent');

    path.on('mouseover', function(d) {
      const total = d3.sum(
        self.pieData.map(function(n) {
          return n ? n.value : 0;
        })
      );

      const tooltipValue = Math.round((1000 * d.data.value) / total) / 10;
      self.tooltip
        .select('.tooltip-label')
        .html(d.data.name.toUpperCase())
        .style('color', 'black');
      self.tooltip.select('.tooltip-value').html(d.data.value + d.data.unit);
      self.tooltip.select('.tooltip-percent').html(tooltipValue + '%');

      self.tooltip.style('display', 'block');
      self.tooltip.style('opacity', 2);
    });

    path.on('mousemove', function(d) {
      self.tooltip
        .transition()
        .duration(200)
        .style('opacity', 1);
      self.tooltip
        .style('top', d3.event.layerY - 100 + 'px')
        .style('left', d3.event.layerX - 25 + 'px');
    });

    path.on('mouseout', function() {
      self.tooltip
        .transition()
        .duration(700)
        .style('opacity', 0);
      // self.tooltip.style('display', 'none');
    });

Я бы хотел разместить его в зависимости от положения дуги, а не от положения мыши. Я также хотел бы создать анимацию, где он падает с небольшой высоты, когда он появляется. Прямо сейчас я не знаю, как расположить его в соответствии с его родительским элементом или как мне установить display: none и по-прежнему выполнять переход (возможно ли это как-то последовательно)?