D3.js D3：将工具提示放置在甜甜圈图表外部

我已经用d3制作了一个基本的甜甜圈图表，并为这个甜甜圈添加了一个工具提示

问题： 当我将鼠标悬停在甜甜圈的左侧时，工具提示会出现在外面。

但当我停留在甜甜圈的左侧时，工具提示会出现在甜甜圈的内部

---

如何将工具提示始终保持在外部？

我通过在mouseMove上设置适当的顶部和左侧，并借助event.pageX和event.pageY

.on("mousemove", function(d, i) {
  tooltip.style("top", event.pageY - 10 + "px");
  if (event.pageX < 360) {
    tooltip.style("left", event.pageX - 80 + "px");
    d3.select(".donut_arrow_box").attr("class", "left donut_arrow_box");
  } else {
    tooltip.style("left", event.pageX + 10 + "px");
    d3.select(".donut_arrow_box").attr("class", "right donut_arrow_box");
  }
})

.on（“mousemove”，函数（d，i）{
工具提示.style（“top”，event.pageY-10+“px”）；
如果（event.pageX<360）{
tooltip.style（“左”，event.pageX-80+“px”）；
d3.选择（“.donut\u arrow\u box”）.attr（“class”，“left donut\u arrow\u box”）；
}否则{
tooltip.style（“左”，event.pageX+10+“px”）；
d3.选择（“.donut\u arrow\u box”）.attr（“类”，“右donut\u arrow\u box”）；
}
})