我大致熟悉 d3 中拖动的工作原理。但是最近我发现了一些让我感到困惑的事情。
下面通过代码创建一个f orce directed graph我无法按照代码来处理拖动节点:
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
知道为什么我们要在 dragstarted 和 dragended 中检查 if 语句吗?
我尝试删除 if 条件,并没有真正看到与力有向图有太大区别。也就是说,而不是
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
我放
simulation.alphaTarget(0.3).restart();
并没有看到太大的区别。
最佳答案
active
属性描述 here .它指示当前正在进行的拖拽事件的数量,而不是当前正在触发的事件,并且仅与多点触控场景真正相关。使用此检查的原因是只要发生至少一个事件阻力,就可以保持模拟运行。
例如,如果没有发生事件拖动,并且您开始拖动,则在 dragstarted
d3.event.active
将为 0,力模拟将启动。如 d3.event.active !== 0
,那么已经有阻力发生并且模拟已经在进行中。
同样,在 dragended
, 如果 d3.event.active !== 0
,然后另一个阻力仍在发生,我们不想停止模拟。如 d3.event.active === 0
,那么这是最后一个阻力,我们想停止模拟。
关于d3.js - d3.event.active 用于拖放圆圈的目的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42605261/