gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 18:53:15 27 4
gpt4 key购买 nike

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

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

最佳答案

使用 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);

关于javascript - 初始缩放在 d3 v4 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50367145/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com