基于带有过渡的圆弧位置的Angular d3js放置工具提示

Question

我已经创建了一个甜甜圈图，现在我正尝试为其创建工具提示。我遵循了一个简单的教程并创建了一个工具提示，但是我想对其进行修改。

我看过一些类似的文章（D3.js: Position tooltips using element position, not mouse position?），但我无法实现自己的目标。

饼图的结构如下

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并仍然实现过渡（是否可以以某种方式顺序执行这些操作）？