如何将鼠标悬停在一个图表上以在 D3.js 中的所有图表上显示一条垂直线和工具提示？

问题描述

我将 D3.js 与 ReactJS 结合使用，我想将鼠标悬停在一个图表上，并在所有其他图表上显示一条垂直线和工具提示。

我一次只能在一张图表中获得垂直线。 预期结果是在所有图表中显示一条垂直线和工具提示。

这是我试过的：

  React.useEffect(() => {
    d3.select(anchorEl)
      .on("mouSEOut.tooltip",() => {
        d3.select(ref.current).attr("opacity",0);
      })
      .on("mouSEOver.tooltip",1);
      })
      .on("mousemove.tooltip",(e) => {
        d3.select(ref.current)
          .selectAll(".tooltipLinePoint")
          .attr("opacity",1);
        followPoints(e);
      });
  },[anchorEl,followPoints]);

这是实际的代码结果multiline-chart-tooltip-acoss-all-charts

解决方法

解决办法：

绘制当前悬停图表的线条，然后绘制其他图表的线条，关键是使用d3.select()和d3.selectAll()。

  d3.select(ref.current)
    .select(".tooltipLine")
    .attr("x1",x)
    .attr("x2",x)
    .attr("y1",-margin.top)
    .attr("y2",height);

  d3.selectAll(".tooltip")
    .select(".tooltipLine")
    .attr("x1",height);

  drawLine(baseXPos);
  drawContent(baseXPos);
  drawBackground();

  drawLineForOthers(baseXPos);
  drawContentForOthers(baseXPos);
  drawBackgroundForOthers();