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

Question

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

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

Answer 1

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


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 的值

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

How to add a tooltip to a pie chart?

d3.js

donut-chart

reactjs