[解決済み] D3フォースレイアウトのグラフを拡大表示する方法はありますか？

質問

D3はフォースディレクションレイアウトです。 ここで . このグラフにズームを追加する方法はありますか？現在、マウスホイールのイベントは捕捉できたのですが、再描画関数自体をどう書けばいいのかよくわかりません。何か提案はありますか？

var vis = d3.select("#graph")
  .append("svg:svg")
  .call(d3.behavior.zoom().on("zoom", redraw)) // <-- redraw function
  .attr("width", w)
  .attr("height", h);

どのように解決するのですか？

2014年6月4日更新

参照 Mike Bostock氏の回答はこちら D3 v.3での変更点および に関連する例 . 私はこれがおそらく以下の答えに取って代わると思います。

2014/2/18更新

SVG全体にパンやズームをさせたいのであれば、@ahaarnosさんの回答が望ましいと思います。ネストされた g 要素は、同じSVGにズームしない要素がある場合にのみ必要です（元の質問のケースとは異なります）。もしあなたが する に動作を適用すると g 要素に適用し、次に背景の rect などの要素が必要で、そのためには g がポインタイベントを受け取るようにする必要があります。

オリジナルの回答

私はこれを動作させるために zoom-pan-transform の例を参考にしました。 http://jsfiddle.net/nrabinowitz/QMKm3/

これは思ったより複雑でした。 g 要素を入れ子にして、SVG の pointer-events 属性に all で、ポインタイベントを受け取るために背景の矩形を追加します（そうしないと、ポインタがノードまたはリンクの上にあるときのみ動作します）。そのため redraw 関数は比較的単純で、最も内側の g :

var vis = d3.select("#chart")
  .append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .attr("pointer-events", "all")
  .append('svg:g')
    .call(d3.behavior.zoom().on("zoom", redraw))
  .append('svg:g');

vis.append('svg:rect')
    .attr('width', w)
    .attr('height', h)
    .attr('fill', 'white');

function redraw() {
  console.log("here", d3.event.translate, d3.event.scale);
  vis.attr("transform",
      "translate(" + d3.event.translate + ")"
      + " scale(" + d3.event.scale + ")");
}

これはSVG全体を効果的に拡大縮小するため、画像を拡大するようにストロークの幅も拡大縮小します。

もう一つの の例です。 にも同じような例があります。