我有一个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”)。attr('opacity',“ 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(this)的无数种形式,但没有任何效果。节点更容易定位,因为它们具有ID,但链接路径却没有。
答案 0 :(得分:0)
如果您要选择指定的路径,则始终可以使用自定义模式,d3选择器使用DOM querySelector函数,请参见source code
如果您的节点和链接没有id,也许您可以找到一些适用于节点但不适用于链接的唯一属性,例如,如果节点具有 cursor 属性,则可以选择全部路径
d3.selectAll('path[cursor]')
如果只需要链接,也许没有 cursor 属性,则可以尝试
d3.selectAll('path:not([cursor])')