D3 force layout with highlighting and fading

Question

In this jsfiddle a force layout is implemented, with special feature of highlighting selected node (together with all links from that node, and nodes that are on the other end of these links).

Most of the time the method works, however when I hit the boundary while dragging selected node, suddenly all layout is highlighted, and it returns to desired state once the node is dragged away from the boundary. This is illustrated in the following animation:

(ERROR IS WHEN DRAGGED NODE HITS THE WALL)

Can this be fixed?

(This example is implemented based on this question, there one can read explanation of the code etc.)

EDIT: Please see Dragging and highlighting for different approach to this problem.

This is achieved by adding lines:

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

Modified fiddle is here.

Answer 1

I think this is just an artifact coming from the cursor no longer being over the selected node. When hitting the wall, as can be seen in the illustration, you hover out of the selected node. If you are careful to hit the wall and still keep the cursor over the selected node, then it works.

In my view this is not a bug nor a feature, but the desired behavior: when node is no longer selected, the hightlight effect is gone.