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

时间:2017-03-05 06:31:31

标签: d3.js

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

并没有看到太多差异。

2 个答案:

答案 0 :(得分:8)

double total = listBoxDoubleItems.Sum(); double highest = listBoxDoubleItems.Max(); double lowest = listBoxDoubleItems.Min(); double average = listBoxDoubleItems.Average(); 属性描述为here。它表示当前正在进行的事件当前正在进行的拖动事件数量除外,并且仅与多点触控场景相关。使用此检查的原因是只要存在至少一个活动拖动,就保持模拟运行。

例如,如果没有活动拖动,并且您开始拖动,active dragstarted将为0,并且力模拟将启动。如果d3.event.active,则表示已经发生拖拽并且模拟已在进行中。

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

答案 1 :(得分:5)

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

  

我尝试删除它并没有真正看到与力导向图有太大差别。

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

dragstarted中没有此行:

if (!d3.event.active) simulation.alphaTarget(0.3).restart();

拖动节点时不会重新启动模拟。我做了一个bl.ocks复制Bostock的代码并只删除该行。等到力停止(大约5秒)并尝试拖动节点:

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

你知道吗?你不能!

并且,对于dragended中的这一行:

if (!d3.event.active) simulation.alphaTarget(0);

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

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