是否有类似强制布局但支持单击事件的 D3 布局引擎

Question

我想绘制一个有向图，其中任何节点都可以链接到任何其他节点（即没有定义的层次结构），我使用的是强制布局引擎，但它不支持点击事件处理。 我希望能够单击一个节点并将该节点居中，其他所有内容都围绕它进行布局。

这在D3中可能吗？

编辑：根据 d3.force.layout 的 API 文档：

force.on（type， listener）

注册指定的侦听器以接收指定的事件 从"力"布局键入。目前，只有"即时报价"事件是 支持

这表明仅添加 Click 事件处理程序是行不通的。

此外，树布局需要（据我所知）层次结构，并且我的数据更加纠结。

Answer 1

在对此感到困惑之后，我有一些接近我想要的东西，所以我会分享。

首先，布局引擎没有点击处理程序，但这不是必需的;我想单击一个节点并将其固定下来，所以我需要在节点上安装一个单击处理程序。

其次，在 d3 API 中描述的节点级别有一个"固定"属性，用于部队布局引擎。

结合这两者，我可以向锁定或解锁节点位置的节点添加单击处理程序。

使用此处的示例，我将以下内容添加到 CSS 中： circle:hover { fill: red; }并将圆的定义从：

var circle = svg.append("svg:g").selectAll("circle")
.data(force.nodes())
.enter().append("svg:circle")
.attr("r", 6)
.call(force.drag);

自

var circle = svg.append("svg:g").selectAll("circle")
.data(force.nodes())
.enter().append("svg:circle")
.attr("r", 6)
.on("click", function(d){ d.fixed = 1 - d.fixed; force.start(); })
.call(force.drag);

现在，当我将鼠标悬停在一个圆圈上时，它会变成红色（显示我捕获了它），然后如果我单击，它会将其锁定到位。 然后，我可以在其他圆圈上重复此操作并将它们拖到我想要的位置。