初始缩放在d3 v4中不起作用 [英] Initial zoom not working in d3 v4

问题描述

我已这样导入 zoom

import {zoom} from 'd3-zoom';

我的 svg 和组容器看起来像这样

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

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

我尝试设置初始缩放级别（通过 zoom（）。scaleTo （）这样的功能

I tried to set an initial zoom level (via zoom().scaleTo() function like this

zoom().scaleTo(container, zoomScale)

或类似的

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

但是没有任何反映。 b $ b有趣的是zoom函数起作用了，看起来像这样

But nothing is reflected back. Interestingly the zoom function works , which looks like this

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

通过在我的容器中添加转换来添加初始缩放也可以，但是在下一个缩放触发器上，缩放从值1开始，并且在

Adding initial zoom by adding transform in my container works as well, but on the next zoom trigger, zoom starts off with value 1 and a flicker sort of thing is seen in the whole chart. I wish to avoid that.

这里出了什么问题？请帮忙。

What is wrong here ? please help .

推荐答案

使用 d3.zoom（）方法（或在您的情况， zoom（））：

Set a variable or a constant using the d3.zoom() method (or, in your case, 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 （当然，

Here I'm using myZoom as the name just to make clear that it's different from zoom(), but the most traditional name is zoom (of course, you chan choose whatever valid name you want).

然后，您可以将其用作：

Then, you can use it as:

myZoom.scaleTo(container, zoomScale)

使用 myZoom.scaleTo（container，zoomScale）和 zoom（）。scaleTo（container，zoomScale）是 myZoom 拥有对链中事件处理程序和其他方法的引用（如果有的话）。

The main difference between using myZoom.scaleTo(container, zoomScale) and zoom().scaleTo(container, zoomScale) is that myZoom holds a reference to the event handlers and other methods in the chain, if any.

此外，别忘了更改SVG中的调用变为：

Also, don't forget to change the call in the SVG, which becomes just:

svg.call(myZoom);

这篇关于初始缩放在d3 v4中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！