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

Question

我已经像这样导入了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开始，并且在整个图表中都看到了闪烁的东西。 我希望避免这种情况。

这是怎么了 请帮忙 。

Answer 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拥有对事件处理程序和链中其他方法（如果有zoom().scaleTo(container, zoomScale)的引用。

另外，不要忘了更改SVG中的呼叫，它变成了：

svg.call(myZoom);