如何向饼图添加工具提示？

问题描述

我已经实现了一个 react 和 d3 饼图 (https://observablehq.com/@stians/react-donut-chart-2)，我想向其中添加一个基于 div 的工具提示，其中包含一个绝对位置以及左侧和顶部 px 偏移量。我正在努力寻找正确的计算方法，以便在悬停的路径项的中心内正确定位 div。我确实相信 DonutChart 组件中的 arc.centroid(arcData) 为我提供了弧的中心线，但这是 svg 中的所有坐标。

由于 div 将在 svg 之外，我需要添加相对于视口的定位。我已经尝试通过在 DonutContainer 中添加一个 useRef，并将 ref 添加到图中（然后使用 ref.current.getBoundingClientRect()）。这使我可以访问图形标记的 x、y、宽度、高度等值。有人可以帮我找到正确的函数来计算我的工具提示的左值和上值，该函数应该位于所选弧的中心吗？

解决方法

我最近做了这个，你只需要一点代数就能搞定。基本上，因为您根据 svg ViewBox 获得质心，所以您需要将其映射到 containsind 元素。我已经调整了我所做的，因为它略有不同，但以下功能应该会有所帮助：

const tooltipPos = (centroid) => {

    const svgBox = d3.select(`svg#<YOUR TAG>`).node().getBoundingClientRect();
   
    const posX = svgBox.x + (centroid[0] / width) * svgBox.width;
    const posY = svgBox.y + (centroid[1] / height) * svgBox.height;

    return [posX,posY];
}

请注意，宽度和高度是传递到 svg 的那些