D3.js D3 V4 zoom.transform拖动时跳转

我是D3的新手，正在阅读如何设置当前的缩放变换，但我很难理解我做错了什么。。我使用下面的一行在页面上首先居中放置一个圆

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

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

---

我是否使用了不正确的方法来实现我的目标？

您只需在svg上设置调用即可

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

---

您只需在svg上设置调用

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

---

首先，使用

svg

和

g

调用zoom两次。使用

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

元素上使用缩放

---

希望对您有所帮助。

首先，您将使用

svg

和

g

调用zoom两次。使用

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

元素上使用缩放

---

希望能有所帮助。

感谢您的回复和解释。非常有帮助。感谢您的回复和解释。非常有用。