d3.js - 如何禁用 d3.behavior.zoom 的平移？

Question

这个问题看起来与这个问题非常相似，但我仍然无法弄清楚是否可以使用 d3.behavior.zoom 但没有平移功能。换句话说，我只想使用滚轮放大/缩小。

这样做的原因是我希望能够在“可缩放”区域上刷。

谢谢！

Answer 1

假设您已经定义了缩放行为：

var zoom = d3.behavior.zoom().on('zoom', update);

当您将缩放行为应用于选择时，您可以取消注册它在内部用于检测和响应某些交互的事件侦听器。在你的情况下，你想做这样的事情：

selection.call(zoom)
    .on("mousedown.zoom", null)
    .on("touchstart.zoom", null)
    .on("touchmove.zoom", null)
    .on("touchend.zoom", null);

我不确定您是否要删除触摸事件。这样做可能会消除双击缩放。你应该尝试这些。

Answer 2

我想分享我发现的解决此问题的解决方法会很好。我所做的是在画笔开始时使用监听器来“停用”缩放：

zoom.on("zoom",null);
selection.call(zoom);

并在刷端事件中再次激活它。

还有一个技巧需要考虑，它来自于保存最后一次有效缩放交互的比例和过渡值很重要的事实，以便您在像这样在brushend事件上激活画笔时使用这些值

zoom.scale(lastEventScale).translate(lastEventTranslate).on("zoom",drawZoom);
selection.call(scatterZoom);

我很想听到这个问题的其他更“优雅”的解决方案。

Answer 3

我发现的一种解决方案是在启用缩放的元素（它们必须是同级元素）前面粘贴一个矩形元素，并将其填充设置为“透明”，当我想禁用缩放交互或设置为“无”时，当我想要启用缩放交互。它看起来像这样：

if (chart._disableZoom) {
    var rootPanel = d3.select('.rootPanel'); // this is the parent of the element that can be zoomed and panned
    if (!rootPanel.select('.stopEventPanel').node()) { // create panel if it doesn't exist yet
       //.stopEventPanel is appended next to the zoom-enabled element
        rootPanel.append('rect').attr('class', 'stopEventPanel').attr('width', renderConfig.width).attr('height', renderConfig.height).attr('fill', 'transparent');
    } else { // disable zoom and pan
        rootPanel.select('.stopEventPanel').attr('fill', 'transparent');
    }
} else { // enable zoom and pan
    d3.select('.rootPanel').select('.stopEventPanel').attr('fill', 'none');
}