D3力グラフがパンまたはズームを期待通りにしません

Question

私は大体these really helpful examplesに基づいてD3フォースグラフを作成しました。

私はパンとズームの機能を追加したかったのですが、別の例を使ってみました（2つのリンクしか含めることはできませんが、Googleの "d3 force zoom eyaler"

残念ながら、私は最初のSVGよりも大きくなっているグラフにズームアウトするとき、私はこのような何かを得る：

var svg = d3.select("body").append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height) 
 
    .call(d3.behavior.zoom().scaleExtent([0.5,2]).on("zoom", redraw)); 
 

 
function redraw() { 
 
    svg.attr("transform", 
 
     "translate(" + d3.event.translate + ")" 
 
     + " scale(" + d3.event.scale + ")"); 
 
}

：

Result of dragging and dropping

をここに関連するコードがあります

パンとズームの動作を変更してスクロールしてポップにするにはどうすればよいですかもともと表示されていた正方形を動かすのではなく、残りのグラフを見ることができますか？

Answer 1

OK、私はそれをうまくいったようです...あなたは<g>ではなく、SVG自体で変換を実行する必要があります。だから、：念のためにここに誰がこれを置く

var svg = d3.select("body").append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height) 
 
    .call(d3.behavior.zoom().scaleExtent([0.5,2]).on("zoom", redraw)); 
 

 
var g = svg.append("g"); // add <g> 
 

 
function redraw() { 
 
    g.attr("transform", // perform transform on g, not svg 
 
     "translate(" + d3.event.translate + ")" 
 
     + " scale(" + d3.event.scale + ")"); 
 
}

は同じミスを犯しました！