是否有像强制布局一样的D3布局引擎，但具有点击事件支持

Question

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

D3中有可能吗？

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

force.on（type，listener）

注册指定的侦听器以接收指定的事件从强制布局中键入。目前，只有“滴答”事件支持

这表明简单地添加click事件处理程序将不起作用。

而且，据我所知，树形布局需要一个层次结构，并且我的数据更复杂。

Answer 1

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

首先，没有布局引擎的点击处理程序，但这不是必需的；我想单击一个节点并进行修复，因此我需要该节点上的单击处理程序。

第二，在d3 API中为强制布局引擎描述的节点级别上有一个“固定”属性。

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

使用示例here，我将以下内容添加到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);

to

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);

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