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

【问题标题】：Is there a D3 layout engine like force layout but with click event support是否有类似强制布局但支持点击事件的 D3 布局引擎
【发布时间】：2012-08-13 08:50:53
【问题描述】：

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

这在 D3 中可能吗？

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

force.on（类型，监听器）

注册指定的监听器以接收指定的事件从力布局中键入。目前，只有“tick”事件是支持

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

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

【问题讨论】：

如果您在谈论 this 强制布局，我不明白为什么它不可能。你试过node.on("click", handler())吗？
this 看起来是一个类似的问题。
通过编辑问题来回答点击处理程序评论。
我错了。很抱歉误导性的回答。
Alm，感谢您的帮助。

标签： javascript d3.js svg dom-events force-layout

【解决方案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);

到

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

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

【讨论】：