D3.js：从选择中删除 force.drag答案

【问题标题】：D3.js: Remove force.drag from a selectionD3.js：从选择中删除 force.drag
【发布时间】：2012-10-19 15:16:58
【问题描述】：

我有一个（相当简单的）问题：如何在 D3.js 所做的选择上“取消调用”force.drag？假设我创建了一组元素并在其上调用“调用”，给它一个强制导向布局的拖动回调。看起来像这样：

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

现在应该可以稍后从某些节点中删除该行为。我的方法包括使用

重置各种监听器，例如“点击”、“拖动”等

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

他们都没有工作。有人知道如何删除回调吗？

【问题讨论】：

【解决方案1】：

这个问题不是问如何对拖动元素进行细粒度控制，但我来这里是为了寻找如何根据条件打开/关闭拖动，提问者还询问了如何在之后恢复拖动在 cmets 中删除它。

因此，对于寻找如何有条件地允许拖动事件的任何人，请使用drag.filter。

drag.filter 接受需要返回布尔值的回调。如果回调返回true，则拖动发生，否则拖动不会触发。

这比从选择中删除拖动然后尝试重新应用要干净得多。

【讨论】：

【解决方案2】：

这条线不知何故不兼容移动设备（chrome/android）

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

【讨论】：

【解决方案3】：

你很接近。拖动事件由mousedown 事件启动，其命名空间名为drag。见：https://github.com/mbostock/d3/blob/master/src/behavior/drag.js#L5

所以，要删除它，你可以这样做：

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

【讨论】：

完美解决了，我刚试了一下，效果很好:) D3.js 中的事件是否默认命名空间？
是的。此外，如果您添加自己的事件侦听器，则为它们命名是有意义的。它们使使用多个侦听器侦听同一事件成为可能。
好的，我已经熟悉 jQuery 插件开发中的命名空间事件。似乎 D3.js 只允许您为每个合格事件注册一个回调，因此命名它们是有意义的。再次感谢。
知道如何重新启用拖动行为吗？调用d3.select('rect#no-drag').on('mousedown.drag', null) 后，调用d3.select('rect#no-drag').call(force.drag) 并没有带回来
抱歉，上面保存的太早了。这有点 hacky 和 YMMV，但是在使用上述解决方案后恢复拖动行为的一种方法是首先获取对 d3 的拖动回调的引用：var dragCallback = d3.select('rect#no-drag').property('__onmousedown.drag')['_'];，然后稍后恢复：d3.selectAll('rect#no-drag').on('mousedown.drag', dragCallback);