D3 V4 zoom.transform拖动

Question

我是全新的D3，并正在阅读here关于如何设置当前缩放转换，但我有麻烦理解我做错了什么..我使用以下行最初在页面上居中放置一个圆。

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

希望它能帮助。