D3.js无法显示工具提示

ohtdti5x 于 2022-11-12 发布在其他

关注(0)|答案(1)|浏览(167)

我试图添加一个工具提示，每次当悬停在我的折线图圆圈。正如你可以看到在下面的图片工具提示是存在于dom，但我不能显示它。这里我重现了我的问题在沙箱：
https://codesandbox.io/s/serene-browser-t38ud6?file=/src/App.js

const tooltip = d3
  .select(d3Chart.current)
  .append("div")
  .attr("class", "tooltip")
  .style("opacity", "0")
  .style("background-color", "red")
  .html(`<p>test</p>`);

const mouseover = function (d) {
  console.log("tooltip");
  tooltip.transition().duration(200).style("opacity", 0.9);
};

svg
  .append('g')
  .selectAll('dot')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx', function (d) {
    return x(d.date);
  })
  .attr('cy', function (d) {
    return y(d.balance);
  })
  .attr('r', 5)
  .attr('fill', '#69b3a2')
  .on('mouseover', mouseover);

d3.js

来源：https://stackoverflow.com/questions/73228097/d3-js-cant-display-a-tooltip

1条答案

按热度按时间

toe950271#

我遵循了这个article，您只需要将div移到svg之外

创建一个引用以选择工具提示div

const tooltipRef = useRef();

将其添加到HTML

...
      </button>
      <div className="tooltip" ref={tooltipRef} />
      <svg id="chart" ref={d3Chart}></svg>
   ...

并在鼠标事件上更改其样式

const mouseover = function (event, d) {
      console.log(d);
      const tooltipDiv = tooltipRef.current;
      if (tooltipDiv) {
        d3.select(tooltipDiv).transition().duration(200).style("opacity", 0.9);
        d3.select(tooltipDiv)
          .html(d.balance)
          // TODO: some logic when the tooltip could go out from container
          .style("left", event.pageX + "px")
          .style("top", event.pageY - 28 + "px");
      }
    };

    const mouseout = () => {
      const tooltipDiv = tooltipRef.current;
      if (tooltipDiv) {
        d3.select(tooltipDiv).transition().duration(500).style("opacity", 0);
      }
    };

    ...

      .attr("fill", "#69b3a2")
      .on("mouseover", mouseover)
      .on("mouseout", mouseout);

https://codesandbox.io/s/youthful-cloud-tsu6sj?file=/src/App.js
请注意，styles.css中的工具提示有一些样式

赞(0）回复(0）举报 2022-11-12

我来回答

D3.js无法显示工具提示

1条答案

相关问题

热门标签

最新问答