D3：将工具提示放在“甜甜圈图”外部

Question

我已经使用d3制作了基本的甜甜圈图，并向该甜甜圈添加了工具提示。

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

但是当我将鼠标悬停在甜甜圈的左侧时，工具提示会出现在甜甜圈的内部

如何使工具提示始终在外面？

Answer 1

我通过在 event.pageX 和 event.pageY

的帮助下在onMouseMove上设置适当的顶部和左侧来解决此问题

.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");
  }
})