拖放圈子中的d3.event.active目的

Tom*_*oth 3 d3.js

我大致熟悉d3中拖动的工作方式.但是我最近发现了一些让我感到困惑的事情.

通过代码创建af orce有向图我无法按照代码来处理拖动周围的节点:

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;
}
Run Code Online (Sandbox Code Playgroud)

知道我们为什么要在这里用dragstarted和dragended检查if语句吗?

我尝试删除if条件并没有真正看到与力导向图有太大差别.也就是说,而不是

if (!d3.event.active) simulation.alphaTarget(0.3).restart(); 
Run Code Online (Sandbox Code Playgroud)

我放

simulation.alphaTarget(0.3).restart();
Run Code Online (Sandbox Code Playgroud)

并没有看到太大的差异.

ada*_*amq 8

active属性在此处描述.它表示当前正在进行的事件当前正在进行的拖动事件的数量除外,并且仅与多点触控场景相关.使用此检查的原因是只要存在至少一个活动拖动,就保持模拟运行.

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

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

  • 对于两个手指中的每一个,都会调用一次`dragstarted`.它第一次被称为`d3.event.active`将为0,并且模拟将重新启动.第二次`d3.event.active`将为1,因此模拟不会再次重启,因为它已经开始了.每个手指也会调用`dragged`和`dragended`.至于不使用触摸屏,我确信有多种方法可以进行多次点击和拖动.但是通过典型的鼠标设置,实际上并没有办法让多个拖动发生. (2认同)

Ger*_*ado 5

(这回答了OP的第一个问题,而不是关于if病情的新问题)

我尝试将其删除,但与力导向图并没有真正的区别。

不是吗 差异很大,非常明显。

dragstarted:中没有此行:

if (!d3.event.active) simulation.alphaTarget(0.3).restart();
Run Code Online (Sandbox Code Playgroud)

拖动节点时,仿真不会重新启动。我做了一个bl.ocks复制Bostock的代码并仅删除该行。等待力量停止(大约5秒钟),然后尝试拖动节点:

https://bl.ocks.org/anonymous/7ad316f78d18233c1408d27c8ff58e0e

你看到吗?你不能!

并且,对于dragended

if (!d3.event.active) simulation.alphaTarget(0);
Run Code Online (Sandbox Code Playgroud)

没有它,模拟将永远不会停止,它会在您停止拖动节点后永远永远缓慢地移动。我做了另一个bl.ocks,它复制Bostock的代码并仅删除该行,请尝试:

https://bl.ocks.org/anonymous/6efa5edf188b3c87b7adbc877672b725