Question

开箱即用，D3 V4平移和缩放对我来说非常适合使用以下代码：

const zoom = d3.zoom();
zoom.on("zoom", () => this.zoom());
this._svg.call(zoom);

zoom()
{
    this._svg_g.attr("transform", d3.event.transform);
}

其中_svg是svg元素，而_svg_g是svg中的顶级g元素。

但是，我想要做的是将行为与不同于默认值的手势相关联。

我希望行为如下：

缩放

目前使用鼠标滚轮，但仅在按下Ctrl键时才显示。
按下特定按键（例如Ctrl + =或Ctrl + - ）。

泛

目前但仅在按下Alt键时才显示。
使用鼠标滚轮垂直移动，没有修改键。
按下Shift键时用鼠标滚轮水平。

确切的手势可能会发生变化，但基本要素是：

仅在特定条件下启用缩放和平移（例如，按下修改键）
触发我选择的事件的缩放和平移

Answer 1

您可以使用过滤器功能：

d3.zoom()
    .filter(() => {
      if (d3.event.type === 'wheel') {
        // don't allow zooming without pressing [ctrl] key
        return d3.event.ctrlKey;
      }

      return true;
    })
    .on('zoom', function () {
       this.zoomed();
    });

D3更改缩放和平移手势

1 个答案: