Блог

Я создал сложенную и сгруппированную столбчатую диаграмму с помощью 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");
      });  

вы можете проверить полный код и демонстрацию в демо

любая помощь в ее работе будет оценена

Используйте SVG foreignObjects для добавления 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-индекса, мы должны поместить последний элемент в начало SVG, и мы можем сделать это с selection.raise .

CodeSandbox