如何解决如何将鼠标悬停在一个图表上以在 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();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。