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

这个问题看起来非常类似于，但我仍然无法确定是否可以使用d3.behavior.zoom，但没有平移功能。换句话说，我只想用方向盘放大/缩小

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

---

谢谢

我想分享我找到的解决这个问题的方法会很好。我所做的是在画笔开始时使用侦听器“停用”缩放：

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

并在brushend事件中再次激活它

还有一个技巧需要考虑，这是因为保存上一次有效缩放交互的缩放和过渡值很重要，以便在像这样激活brushend事件上的笔刷时使用这些值

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

---

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

说您定义了缩放行为：

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

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

---

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

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

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

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.select（'svg'）.on（'mousedown.zoom'，null）要重新启用平移，只需执行选择。调用（缩放）；这在D3V4上不起作用。缩放和拖动似乎是独立的事件（
d3.zoom（）
，
d3.drag（）
），因此这不再是一个问题。（只是不要在（“drag”，function（）{}）上定义
d3.drag（）。
）