如何使用d3.select选择链接?

时间:2018-10-29 17:27:12

标签: reactjs d3.js

我有一个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,但链接路径却没有。

1 个答案:

答案 0 :(得分:0)

如果您要选择指定的路径,则始终可以使用自定义模式,d3选择器使用DOM querySelector函数,请参见source code

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

d3.selectAll('path[cursor]')

如果只需要链接,也许没有 cursor 属性,则可以尝试

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