Question

In this jsfiddle user is supposed to be able to drag a node, and while he/she is dragging, only that node and his neighbors, and links between them, should be highlighted.

I thought I have a good solution, but a problem was reported if the user drags node to the boundary, and in such case there is undesired behavior - all nodes suddenly are highlighted:

(ERROR IS WHEN DRAGGED NODE HITS THE WALL)

enter image description here

This is due to the fact that mouse pointer went away from the node, but user is still keeping the mouse buttons, and still expects only selected node to be highlighted, and others to remain grayed.

Can this be fixed? Can I redesign events so that this situation is cured?

Was it helpful?

Solution

What you want is to fade the non-neighboring nodes while one of them is being dragged, not only on mouseover:

force.drag().on('drag', fade(.1));

Working example: http://jsfiddle.net/h358K/

Note that for symmetry, you might want to fade in the nodes on dragstop.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top