Question

我正在尝试在d3中使用缩放功能。这是一个简单的，具有以下代码

var zoom = d3.behavior.zoom()
                    .scaleExtent([0.5, 4])
                    .on("zoom", function() {
                        this.svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
                    }.bind(this));

它的效果或多或少都很好，所以它可以放大鼠标滚轮并平移拖动。我要那个。但是当使用鼠标滚轮进行变焦时，它也会平移。那，我不想要。它应该只在拖动鼠标滚轮和平移时进行缩放。已经尝试过很少的东西，包括单独的拖动功能和禁用部分鼠标滚轮（我失败了），但无济于事。

你能帮帮我吗？

Answer 1

默认情况下，您的代码将以鼠标位置为中心缩放。

如果要缩放到屏幕中心，可能需要在缩放行为上明确设置center()，如下所示：

var zoom = d3.behavior.zoom()
  .scaleExtent([0.5, 4])
  .center([width / 2, height / 2])
  .on("zoom", function() {
    this.svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  }.bind(this));

如果在任何阶段你需要重置默认的缩放中心行为（缩放到当前鼠标位置），你可以这样做：

zoom.center(null);

Src：Zoom Center

在缩放时禁用鼠标滚轮上的平移，但在拖动时保留它

1 个答案: