Question

我们正在使用d3来构建图形，它具有两个自定义按钮来处理缩放以及通过鼠标滚轮/触控板进行的标准缩放。

let local = this;

let zoomIn = d3.select("#zoom_in");
let zoomOut = d3.select("#zoom_out");
let reset = d3.select("#reset");

zoomIn.on("click", function() {
  zoom.scaleBy(local.chart.transition().duration(500), 1.2);
});

zoomOut.on("click", function() {
  zoom.scaleBy(local.chart.transition().duration(500), 0.8)
});

这可以将图形（包括画笔）精确缩放。但是它从中心放大。

根据文档：https://github.com/d3/d3-zoom#zoom_scaleBy是从中心缩放的默认行为，除非提供了位置...但是我们无法弄清楚该参数的实际含义是什么……

我们尝试过：

zoom.scaleBy(local.chart.transition().duration(500), 0.8, 0);

，并且还尝试使用translateBy：https://github.com/d3/d3-zoom#zoom_translateBy在缩放后将其移回左侧：

zoom.scaleBy(local.chart.transition().duration(500), 0.8, 0);
zoom.translateBy(local.chart.transition().duration(500), 0, 0);

但这会取消缩放...

是否有使用scaleBy从某个位置缩放的示例？

Answer 1

您已经介绍了zoom.scaleBy()上的API文档（重点是我）：

# 缩放 .scaleBy（选择， k [， p < / em>]）
   […]
   p 点可以指定为两元素数组[ p _x ， p _{y < / sub>}] 或功能。

通过提供一个包含两个元素的数组作为调用的第三个参数，您可以指定缩放的中心。对于您的代码，可以这样指定：

zoom.scaleBy(local.chart.transition().duration(500), 1.2, [0, height / 2]); // ↑ ↑ // [px,py ]

类似地，zoom.scaleTo()，zoom.translateBy()和zoom.translateTo()也是如此。

d3比例从左而不是中心

1 个答案: