javascript - 初始缩放在 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)

但是没有任何反射(reflect)。 有趣的是，缩放功能有效，如下所示

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 code> (当然，您可以选择您想要的任何有效名称)。

然后，您可以将其用作:

myZoom.scaleTo(container, zoomScale)

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

另外，不要忘记更改 SVG 中的调用，这将变为:

svg.call(myZoom);