D3.js：从一个选择器中移除force.drag

Question

我有一个（非常简单的）问题：如何“取消”对D3.js创建的选择使用force.drag？假设我创建了一组元素并调用了“call”，将其设置为力导向布局的拖动回调函数。代码如下：

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

现在可以随后从某些节点中移除该行为。我的方法包括使用reset来重置各种监听器，例如'click'、'drag'等。

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

所有这些方式都没有起作用。有人知道如何删除回调函数吗？

- user654123

Answer 1

你很接近了。拖动事件由带有名称空间为 drag 的 mousedown 事件发起。请参见：https://github.com/mbostock/d3/blob/master/src/behavior/drag.js#L5

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

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

- nautat

---

这完美地解决了，我刚试过了，它可以工作 :) D3.js默认命名空间化事件吗？ - user654123

是的。如果您添加自己的事件侦听器，对它们进行命名空间处理可能是有意义的。它们使得可以使用多个侦听器来监听同一事件。 - nautat

好的，我已经熟悉了jQuery插件开发中的命名空间事件。看起来D3.js只允许为每个合格的事件注册一个回调函数，因此对它们进行命名空间处理是有意义的。再次感谢。 - user654123

有什么办法重新启用拖动行为吗？在调用 d3.select('rect#no-drag').on('mousedown.drag', null) 后，调用 d3.select('rect#no-drag').call(force.drag) 无法将其恢复。 - kdbanman

抱歉，上面保存得太早了。这种方法有点hacky，而且因人而异，但是恢复使用上述解决方案后的拖动行为的一种方法是首先获取对d3的拖动回调的引用：var dragCallback = d3.select('rect#no-drag').property('__onmousedown.drag')['_']; 然后稍后恢复它：d3.selectAll('rect#no-drag').on('mousedown.drag', dragCallback); - Jonathan Guerrera

d3v4+ 的更新？ - Alex Lenail

Answer 2

这个问题并不是在问如何对拖动元素进行细粒度控制，而是我来这里寻找如何根据条件切换拖动开/关，提问者在评论中也问了如何在移除拖动后重新获取它。

因此，对于任何想要有条件地允许拖动事件的人，可以使用 drag.filter。 drag.filter 接受一个需要返回布尔值的回调函数。如果回调函数返回 true，则发生拖动，否则不会触发拖动。

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

- YouCodeThings

---

你来晚了，但是非常感谢你的评论，谢谢！ - user654123

Answer 3

这行代码在移动设备上（Chrome/Android）不兼容。

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

- alfredopacino