时间戳

首页 > 解决方案 > D3：将工具提示定位在圆环图之外

d3.js - D3：将工具提示定位在圆环图之外

问题描述

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

问题： 当我将鼠标悬停在甜甜圈的左侧时，工具提示出现在外面。 在此处输入图像描述

但是当我将鼠标悬停在甜甜圈的左侧时，工具提示出现在甜甜圈内 在此处输入图像描述

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

标签： d3.js

解决方案

我通过在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");
  }
})

推荐阅读