我想绘制一个有向图,其中任何节点都可以链接到任何其他节点(即没有定义的层次结构),并且我使用的是强制布局引擎,但它不支持单击事件处理。我希望能够单击一个节点并将该节点居中,并将其他所有内容放置在它周围。
这在 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
这表明仅仅添加点击事件处理程序是行不通的。
此外,树布局需要(据我所知)层次结构,并且我的数据更加困惑。
最佳答案
经过一番思考后,我有一些接近我想要的东西,所以我会分享。
首先,布局引擎没有点击处理程序,但这并不是必需的;我想单击一个节点并将其修复,因此我需要在该节点上有一个单击处理程序。
其次,在力布局引擎的 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);
现在,当我将鼠标悬停在一个圆圈上时,它会变成红色(表明我捕获了它),然后如果我单击,它会将其锁定到位。然后我可以在其他圆圈上重复此操作并将它们拖动到我想要的位置。
关于javascript - 是否有类似强制布局但支持点击事件的 D3 布局引擎,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11996754/