d3.js - 如何在 d3 中为图表制作工具提示？

Question

我们需要让它像这里一样移动。示例那里的代码很复杂，我无法弄清楚。

我编写了我的代码，但我不明白如何使工具提示不在鼠标后面水平移动，而是在最近的水平标记附近（如示例中所示）

目前尚不清楚工具提示中粗体文本上方的文本来自何处。如何删除它以使其看起来像图片中的那样？

如何使工具提示的标题与 X 轴上的标签匹配？

标签： d3.js

Answer 1

有很多方法可以做到这一点。我通常这样做的方式是使用与路径相同的比例和数据来创建一系列 SVG 元素（例如圆形或矩形）。

您可以使这些对象可见或不可见。无论哪种方式，您都可以将 mouseenter、mouseleave 事件附加到每个事件以呈现和填充工具提示。