时间戳

首页 > 解决方案 > 如何将工具提示添加到 react + d3 分组和堆叠条形图？

javascript - 如何将工具提示添加到 react + d3 分组和堆叠条形图？

问题描述

我用 react + d3 创建了一个堆叠和分组的条形图，我想添加工具提示，我尝试了不同的方法，但没有一个起作用。工具提示的代码如下所示：

const tooltip = select(svgRef.current)
      .append("div")
      .style("position", "absolute")
      .style("visibility", "visible")
      .style("background-color", "black")
      .style("border", "solid")
      .style("border-width", "1px")
      .style("border-radius", "5px")
      .style("padding", "10px")
      .html("<p>I'm a tooltip written in HTML</p>");
      
    svg
      .select(".barreact")
      .on("mouseover", function () {
        return tooltip.style("visibility", "visible");
      })
      .on("mousemove", function () {
        return tooltip
          .style("top", event.pageY + "px")
          .style("left", event.pageX + "px");
      })
      .on("mouseout", function () {
        return tooltip.style("visibility", "hidden");
      });

您可以在演示中查看完整的代码和演示

任何帮助使其工作将不胜感激

标签： javascriptreactjsd3.js

解决方案

使用 SVGforeignObjects将 HTML 附加到 SVG：

const tooltip = select(svg)
  .append("foreignObject")
  .attr("width", 180);

const tooltipDiv = tooltip
  .append("xhtml:div")
  .html("<p>I'm a tooltip written in HTML</p>");

请注意，我们只设置宽度。高度是通过查看设置了宽度的 div 的高度来动态计算的：您也可以做相反的事情，设置高度并内省宽度：

  bars.on("mousemove", function () {
    const htmlContentHeight = tooltipDiv.node().getBoundingClientRect()
      .height;
    tooltip.attr("height", htmlContentHeight);
    tooltip.raise();
    return tooltip
      .attr("x", event.pageX)
      .attr("y", event.pageY - htmlContentHeight);
  })

由于 SVG 没有 z-index，我们必须将最后一个元素放在 SVG 的顶部，我们可以使用selection.raise.

代码沙盒

推荐阅读