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?

Accepted Answer

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);
```

D3.js: Remove force.drag from a selection

Solution

Problem