Question

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

Answer 1

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

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

d3.selectAll('path[cursor]')

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

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

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

1 个答案: