时间戳

首页 > 解决方案 > 如何在饼图中添加工具提示？

reactjs - 如何在饼图中添加工具提示？

问题描述

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

标签： reactjsd3.jsdonut-chart

解决方案

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

推荐阅读