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

希望它能幫助。