javascript - D3.js: Remove force.drag from a selection

Question

I have a (rather simple) question: How to "un-call" force.drag on a selection made by D3.js? Let's say I created a set of elements and called "call" on it, giving it the drag-callback of a force-directed layout. That looked like this:

    d3.selectAll('rect').call(force.drag);

Now it shall be possible to remove that behavior from some of the nodes later on. My approaches included resetting various listeners, such as 'click', 'drag' etc. using

    d3.select('rect#no-drag').on('click', null);

None of them worked. Does anybody know how to remove the callback?

Answer 1

You are close. The drag event is initiated by a mousedown event with a namespace called drag. See: https://github.com/mbostock/d3/blob/master/src/behavior/drag.js#L5

So, to remove this you could do:

d3.select('rect#no-drag').on('mousedown.drag', null);