如何在饼图中添加工具提示？答案

【问题标题】：How to add a tooltip to a pie chart?如何在饼图中添加工具提示？
【发布时间】：2021-07-03 16:04:22
【问题描述】：

我已经实现了一个 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、宽度、高度等值。有人可以帮我找到正确的函数来计算我的工具提示的左值和上值，这些值应该位于所选圆弧的中心吗？

【问题讨论】：

链接失效
@MichaelRovinsky 谢谢你告诉我。我现在修好了。

标签： reactjs d3.js donut-chart

【解决方案1】：

我最近做了这个，你只需要一点代数就可以了。基本上，因为您获得了基于 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 的值

【讨论】：

谢谢。我确实认为这是我需要帮助的。我明天去看看，采纳答案。