7

I'm roughly familiar with how dragging works in d3. But I found something that flummoxed me recently.

Following through the code to create a force directed graph I can't follow the code to deal with dragging the nodes around:

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;
}

Any idea why we're checking the if statement here in dragstarted and dragended?

I tried removing the if-condition and didn't really see much of a difference with the force directed graph. That is, instead of

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

I put

simulation.alphaTarget(0.3).restart();

and didn't see much of a difference.

2 Answers 2

13

The active property is described here. It indicates how many drag events, other than the one the event is currently being fired for, are currently ongoing, and is only really relevant for multitouch scenarios. The reason this check is used is to keep the simulation going as long as there is at least one active drag occurring.

For example, if there are no active drags occurring, and you start dragging, in dragstarted d3.event.active will be 0, and the force simulation will start up. If d3.event.active !== 0, then there is already a drag occurring and the simulation is already ongoing.

Likewise, in dragended, if d3.event.active !== 0, then another drag is still occurring and we don't want to stop the simulation. If d3.event.active === 0, then this was the last drag and we want to stop the simulation.

2
  • Ah. I think I understand. Would a multitouch drag fire if I'm looking at a force simulation on an iPad, and I dragged two circles with two different fingers at the same time? Any idea if its possible to have a multitouch drag when you're looking at the force simulation not using a touchscreen?
    – Tom Roth
    Commented May 19, 2017 at 5:07
  • 3
    dragstarted would be called once for each of the two fingers. The first time it get's called d3.event.active would be 0, and the simulation would be restarted. The second time d3.event.active would be 1, so the simulation wouldn't restart again, because it's already going. dragged and dragended would also be called for each finger. As for not using a touchscreen, I'm sure there are ways to have multiple clicks and drags. But with a typical mouse setup there wouldn't really be a way to have multiple drags occurring.
    – adamq
    Commented May 19, 2017 at 19:33
6

(This answers OP's first question, not the new one regarding the if condition)

I tried removing it and didn't really see much of a difference with the force directed graph.

Didn't you? The difference is quite big and very noticeable.

Without this line in the dragstarted:

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

The simulation is not restarted when you drag a node. I made a bl.ocks copying Bostock's code and deleting that line only. Wait until the force stops (around 5 seconds) and try to drag a node:

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

Did you see? You can't!

And, for this line in the dragended:

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

Without it, the simulation never stops, it keeps slowly moving forever after you stop dragging the node. I made another bl.ocks copying Bostock's code and deleting that line only, try it:

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

4
  • Sorry, I worded my question badly. I meant if Ichange if (!d3.event.active) simulation.alphaTarget(0); to simulation.alphaTarget(0); then I see no difference. Else you're right, it's a big difference! Changed question to clarify
    – Tom Roth
    Commented Mar 6, 2017 at 4:03
  • @puzzler10 No worries, but you've made a different question here. Commented Mar 6, 2017 at 4:53
  • so...why do we check "if (!d3.event.active)"?
    – Tom Roth
    Commented Mar 6, 2017 at 5:39
  • @puzzler10 I see that this question still has no answer, even after 1 week. What's probably happening is that people see my answer and move on, they don't see that you edited your question. That being the case, I suggest you post another question, specifying the doubt regarding the if conditional. Commented Mar 14, 2017 at 4:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.