如何将鼠标悬停在一个图表上以在D3.js中的所有图表上显示垂直线和工具提示？
如何将鼠标悬停在一个图表上以在D3.js中的所有图表上显示垂直线和工具提示？
提问于 2021-06-02 16:19:00
我正在使用D3.js和ReactJS，我想将鼠标悬停在一个图表上，并在所有其他图表上显示垂直线和工具提示。
我一次只能在一个图表中得到垂直线。预期的结果是在所有图表中显示垂直线和工具提示。
这是我尝试过的：
React.useEffect(() => {
d3.select(anchorEl)
.on("mouseout.tooltip", () => {
d3.select(ref.current).attr("opacity", 0);
})
.on("mouseover.tooltip", () => {
d3.select(ref.current).attr("opacity", 1);
})
.on("mousemove.tooltip", (e) => {
d3.select(ref.current)
.selectAll(".tooltipLinePoint")
.attr("opacity", 1);
followPoints(e);
});
}, [anchorEl, followPoints]);回答 1
Stack Overflow用户
回答已采纳
发布于 2021-06-07 03:34:15
解决方案：
为当前悬停的图表绘制直线，然后为其他图表绘制直线，关键是使用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", x)
.attr("x2", x)
.attr("y1", -margin.top)
.attr("y2", height);
drawLine(baseXPos);
drawContent(baseXPos);
drawBackground();
drawLineForOthers(baseXPos);
drawContentForOthers(baseXPos);
drawBackgroundForOthers();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67801439
复制相关文章
相似问题
腾讯云开发者
