javascript - 是否有像力布局但具有点击事件支持的 D3 布局引擎

Question

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

这在 D3 中可能吗？

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

force.on(type, listener)

Registers the specified listener to receive events of the specified type from the force layout. Currently, only "tick" events are supported

这表明简单地添加点击事件处理程序是行不通的。

此外，树布局需要(据我所知)层次结构，而我的数据更加困惑。

Answer 1

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

首先，布局引擎没有点击处理程序，但这并不需要；我想点击一个节点并固定它，所以我需要在节点上有一个点击处理程序。

其次，强制布局引擎的 d3 API 中描述了节点级别的“固定”属性。

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

使用示例 here我将以下内容添加到 CSS:circle:hover { 填充:红色； 并更改圆圈定义:

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

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