首页 > 解决方案 > 链接到 d3 网络图覆盖的参考

问题描述

想问一个简单的问题。我想在 d3 网络图中的链接元素之上创建一个覆盖层。有我可以遵循的样本吗?我一直在尝试搜索,但找不到任何示例。

提前致谢。

标签: javascriptd3.js

解决方案


我能想到的一个很好的例子是Node-RED用来绘制他们的流程图......

在每对节点之间创建多个网络链接——第一个是透明的“背景”链接,带有“宽”笔画(例如 20 像素)。然后直接在上面画出可见的链接,但是用css来设置pointer-events: none;。这使得鼠标进入/退出/悬停事件能够在更宽的背景线上被检测到,只要指针“靠近”可见链接。

在此处输入图像描述

他们的技术还使用了第三个白色“轮廓”链接,比可见链接(在背景和前景链接之间)宽 1 px。这有助于在有很多重叠线的区域中的可见链接之间提供半像素的分离......


推荐阅读