D3 V4での初期ズームレベルの設定

Question

D3 V4の使用を開始したばかりで、パンとズームの機能がうまく動作しません。しかし、すぐに私は規模をパンやズームなどのバック1.

にリセットされます問題は、私は、最初のスケール値を超える1以上の何かになりたいように、私は

zoom.scaleTo(svg, 2); 

を使用してこれを設定ここでは例を示しますされJSFiddleでこの動作の、私は間違って何ですか？

JSFiddle

Answer 1

ここで問題です：

var svg = d3.select("body").append("svg") 
    .attr("width", 600) 
    .attr("height", 600) 
    .call(zoom) 
    .append("g"); 

あなたが代わりに変数svgにSVG要素のグループ要素を割り当てています。

zoomはsvg要素に正しく適用されますが、zoom.scaleTo(svg, 2)を呼び出すと、svg要素ではなくグループ要素がズームされます。

これは、最初にsvg要素を作成してsvg変数に割り当ててグループ要素を作成して割り当てることで修正できます。

var svg = d3.select("body").append("svg") 
    .attr("width", 600) 
    .attr("height", 600) 
    .call(zoom); 

var mainContainer = svg.append("g"); 

はここで固定JSFiddleです：https://jsfiddle.net/skgktrcu/2/