初始缩放在 d3 v4 中不起作用答案

【问题标题】：Initial zoom not working in d3 v4初始缩放在 d3 v4 中不起作用
【发布时间】：2018-10-26 06:54:07
【问题描述】：

我已经像这样导入了zoom

import {zoom} from 'd3-zoom';

我的svg 和群组container 看起来像这样

const svg = select(root)
      .append('svg')
      .attr('width', width)
      .attr('height', height);

const container = svg.append('g');
const zoomScale = 2;

我尝试设置初始缩放级别（通过zoom().scaleTo() 函数这样的

zoom().scaleTo(container, zoomScale)

或者像这样

container.call(zoom().scaleTo, zoomScale)

但是没有任何东西被反射回来。有趣的是，缩放功能有效，看起来像这样

svg.call(
  zoom().on('zoom', () => {
    const transformation = getEvent().transform;
    const {x, y, k} = transformation;
    container.attr('transform', `translate(${x}, ${y})scale(${k})`);
  })
);

通过在我的容器中添加变换来添加初始缩放也可以，但是在下一次缩放触发时，缩放从值 1 开始，并且在整个图表中可以看到一种闪烁的东西。我希望避免这种情况。

这里有什么问题？请帮忙。

【问题讨论】：

首先使用您在问题中描述的事件处理程序设置一个变量，例如var zoom = zoom().on('zoom', () => { const transformation etc...，然后使用它：zoom.scaleTo(container, zoomScale)。另外，对 SVG 做同样的事情：svg.call(zoom);，就是这样。
天啊！！！这很有效，非常感谢你，请回答这个帖子，我会将其标记为正确。您是否还介意解释一下这是如何工作的，而我的版本却没有。谢谢！

标签： javascript d3.js zooming

【解决方案1】：

使用d3.zoom() 方法（或者，在您的情况下为zoom()）设置变量或常量：

const myZoom = zoom().on('zoom', () => {
    const transformation = getEvent().transform;
    const {x, y, k} = transformation;
    container.attr('transform', `translate(${x}, ${y})scale(${k})`);
});

这里我使用myZoom 作为名称只是为了表明它与zoom() 不同，但最传统的名称是zoom（当然，你可以选择任何你想要的有效名称）。

然后，您可以将其用作：

myZoom.scaleTo(container, zoomScale)

使用myZoom.scaleTo(container, zoomScale) 和zoom().scaleTo(container, zoomScale) 的主要区别在于myZoom 持有对事件处理程序和链中其他方法的引用（如果有）。

另外，不要忘记更改 SVG 中的调用，它变成了：

svg.call(myZoom);

【讨论】：