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

Question

I have a created a stacked and grouped bar chart with react + d3 and i want to add tooltip, i have tried different ways but none of them did work. the code for tooltip looks like:

 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"); });

you can check the full code and demo in demo

any help to make it work will be appreciated

Answer 1

Use SVG foreignObjects to append HTML to an 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>");

Note that we only set the width. The height is calculated dynamically by looking at the height of the div with the width set : you can also do the opposite, setting an height and introspecting for the width:

  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);
  })

Since SVG has no z-index, we must put the last element at the top of the SVG, and we can do so with selection.raise .

CodeSandbox