如何使用d3.select选择链接



我有一个React组件,其中包含一个在React-d3-graph中构建的图,当点击链接时,我试图在节点之间选择一个链接,但我无法找到正确的目标方法

d3.select("#graph-id-graph-wrapper").selectAll("g#graph-id-graph-container- 

zoomable"(。selectAll("g[id='"+源+"']"(.selectAll("path"(.attr("fill","red"(.("capacity","1"(

graph id graph wrapper是顶部div,graph id graph container zoomable是子div,节点在布局中用id引用为g,路径是实际的矩形节点符号。链接是没有ID的路径(节点路径的子路径(,在代码中如下所示:

<path cursor="pointer" opacity="1" d="M-10.606601717798213,-10.606601717798213h21.213203435596427v21.213203435596427h-21.213203435596427Z" fill="#57a3ff" stroke="none" stroke-width="1.5" class=""></path>

我试过无数种d3.select的变体,但都不起作用。节点更容易成为目标,因为它们有ID,但链接路径没有。

如果您试图选择指定的路径,您可以始终使用自定义模式,d3选择器使用DOM querySelector函数,请参阅源代码

如果你有没有id的节点和链接,也许你可以找到一些适用于节点但不适用于链接的唯一属性,例如,如果节点具有属性cursor,你可以用它选择所有路径

d3.selectAll('path[cursor]')

如果你只想要链接,那么可能没有光标属性,那么你可以尝试

d3.selectAll('path:not([cursor])')

最新更新