d3.js - d3.event.active 用于拖放圆圈的目的

Question

我大致熟悉 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();

并没有看到太大的区别。

Answer 1

active属性描述 here .它指示当前正在进行的拖拽事件的数量，而不是当前正在触发的事件，并且仅与多点触控场景真正相关。使用此检查的原因是只要发生至少一个事件阻力，就可以保持模拟运行。

例如，如果没有发生事件拖动，并且您开始拖动，则在 dragstarted d3.event.active将为 0，力模拟将启动。如 d3.event.active !== 0 ，那么已经有阻力发生并且模拟已经在进行中。

同样，在 dragended , 如果 d3.event.active !== 0 ，然后另一个阻力仍在发生，我们不想停止模拟。如 d3.event.active === 0 ，那么这是最后一个阻力，我们想停止模拟。