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

【问题标题】：How can I select a link using d3.select?如何使用 d3.select 选择链接？
【发布时间】：2019-04-02 16:46:04
【问题描述】：

我有一个 React 组件，其中包含一个内置于 react-d3-graph 的图形，并且我试图在单击链接时选择节点之间的链接，但我无法找出定位它的正确方法。我可以使用以下脚本定位单个节点：

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

可缩放").selectAll("g[id='" + source + "']").selectAll("path").attr('fill',"red").attr('opacity',"1")

graph-id-graph-wrapper 为顶层div，graph-id-graph-container-zoomable 为子div，节点在布局中引用为g，带ID，路径为实际矩形节点象征。链接是没有 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，但链接路径没有。

【问题讨论】：

标签： reactjs d3.js

【解决方案1】：

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

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

d3.selectAll('path[cursor]')

如果你只想要链接，也许没有 cursor 属性那么你可以试试

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

【讨论】：

感谢您的反馈。因此，如果 d3.selectAll('path[cursor]') 给我一个链接列表，我该如何定位一个特定的链接。像 d3.select(this)？我可以获得“.path”链接的完整列表，但除此之外无法指定。我实际上已经在一个点击函数中得到了这个，它试图基于起点和终点变量来定位一个单独的链接。
如果路径上有特定的事件目标事件，可以像这样选择 d3.selectAll('path[cursor]').on('click', () => console。 log(d3.select(d3.event.target)))，使用 d3.select(d3.event.target)
谢谢，我一定会试试的！