初始縮放在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);