Javascript “理解”;调用;在D3.js中使用强制导向布局
我是D3.js新手,我想使用图形布局。我已经用一个非常简单的图来演示了D3中内置的力定向布局 我想做的是能够关闭图形布局算法(比如,当用户按下空格键时),然后仍然能够拖动节点,稍后再打开强制导向布局 现在我已经设置好了在击中太空时停止力量导向布局:Javascript “理解”;调用;在D3.js中使用强制导向布局,javascript,d3.js,drag,force-layout,Javascript,D3.js,Drag,Force Layout,我是D3.js新手,我想使用图形布局。我已经用一个非常简单的图来演示了D3中内置的力定向布局 我想做的是能够关闭图形布局算法(比如,当用户按下空格键时),然后仍然能够拖动节点,稍后再打开强制导向布局 现在我已经设置好了在击中太空时停止力量导向布局: d3.select("body") .on("keydown", function() { if (d3.event.keyCode == 32) { if (forceActive) {force.stop()
d3.select("body")
.on("keydown", function() {
if (d3.event.keyCode == 32) {
if (forceActive) {force.stop();} else {force.resume();}
}
});
问题在于,每次拖动节点时,它都会重新启动强制布局。我已经将范围缩小到(本质上)节点上的call方法绑定到force布局的drag方法
i、 e.这段链接代码:
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
...
.call(force.drag);
我想我可能要做两件事:
我想知道以前是否做过这件事,以及如何做(根本不可能使用我对如何做的猜测)。首先,关于你明确的问题:
call()
方法做什么
在d3中,call
只是一个方便的函数,可以将其他函数翻过来。做
node.call( force.drag );
实际上和做什么都一样
force.drag( node );
唯一的区别是,选择的调用
方法总是返回选择,因此您可以将其他方法链接到该选择
现在你的问题是,强制.drag(选择)
做什么?它创建事件侦听器,用于处理拖动行为的鼠标和触摸事件。这些事件侦听器更新节点数据对象的位置,但也会重新启动force布局
如果不希望使用默认的强制布局拖动行为,只需在选择时不要调用force.drag
方法。
就能够自定义拖动行为,使其不会重新启动强制布局而言,看起来您无法使用force.drag
(无论如何,在不更改源代码的情况下)但是,您可以通过创建自己的并将其绑定到节点来访问大多数与拖动相关的功能
然后,在拖动事件处理程序中,您将更新节点数据对象的x和y位置,并重新绘制节点及其附加的任何链接。如果图形不太大,可以通过重新调用勾选
函数来重新绘制所有元素以匹配其数据;如果图形很大,则可能需要在数据对象中存储对实际元素的引用,以便快速找到正确的链接
有关使用拖动行为(无强制布局)入门的一些示例: