Question

这个问题看起来与this one非常相似，但我仍然无法弄清楚是否有可能使用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 事件中再次激活它。

还有一个需要考虑的技巧，并且需要保存上次有效缩放交互的比例和转换值非常重要，因此您在 brushend 事件上激活画笔时使用这些值，如此

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

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

Answer 3

我找到的一个解决方案是将一个rect元素粘贴在启用缩放的元素前面（它们必须是兄弟姐妹）并将其填充设置为“透明”，当我想禁用缩放交互或“无”时，当我想启用缩放交互时。它看起来像这样：

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');
}

如何为d3.behavior.zoom禁用pan？

3 个答案: