D3 V4 zoom.transform在拖动时跳跃

Question

我是D3的新手，我正在阅读here关于如何设置当前缩放变换的信息，但我很难理解我做错了什么..我＆＃ 39; m使用以下行首先在页面上居中一个圆圈。

g.call(zoom.transform, d3.zoomIdentity.translate(width / 2, height / 2).scale(2));

这是一个问题的小提琴。只需在结果窗口中的任意位置单击并拖动。您应该看到圆圈立即跳到左上角。

https://jsfiddle.net/hjukmqjv/3/

我使用不正确的方法来实现我的目标吗？

Answer 1

你只需要在svg上设置调用

svg.call(zoom.transform, d3.zoomIdentity.translate(width / 2, height / 2).scale(2));

Answer 2

首先，您使用svg和g两次调用缩放。使用g应用转换（圆圈位于页面的中心）。 然后应用svg缩放（使用放大/缩小事件），将圆形可视化在其（0,0）屏幕位置并产生跳跃。

但是，如果你想看到中心的圆圈，只需将圆圈放在该位置，将正确的属性插入圆圈：

var g = svg.append("g");
g.append("circle")
.attr("r", 50)
.attr("cx",width / 2)
.attr("cy",height / 2)
.style("fill", "#B8DEE6");

并使用svg元素上的缩放。

Updated fiddle

希望它有所帮助。