javascript - ズームとパンを使用した d3 Bounded Force レイアウト

Question

私は、ズームとパン (D3.js) を使用して境界のある力のレイアウトに取り組んでいます。主な問題は、ズームの動作を適切にカスタマイズできないことです。

私のグラフには、ユーザーが svg-element を介して移動できるいくつかの可動要素が含まれています。そこで、ユーザーがグラフの外に出ないようにバウンディング ボックスを実装しました。

ティック関数を次のように構成しました。

function tick() {
  // r: radius of a circle ; w: width ; h: height
  node.attr("cx", function(d) { return d.x = Math.max(r, Math.min(w - r, d.x)); })
      .attr("cy", function(d) { return d.y = Math.max(r, Math.min(h - r, d.y)); });

( http://bl.ocks.org/mbostock/1129492 )

ズームとパン機能を追加することを決定するまでは、うまく機能していました。

ズームのスケールを制限しました: zoom.scaleExtent([0.5, 2]);

ズームアウトすると、描画が 50% 縮小されるので、そのようなことを行うだけで十分だと思いました。

d.x = Math.max(r, Math.min((w*0.5+W) - r, d.x));
d.y = Math.max(r, Math.min((h*0.5+h) - r, d.y));

しかし、グラフが正しく区切られていないようです。これらの数式に何か問題がありますか?

また、次のおかげで、ユーザーが空白の領域をクリックすると、グラフ全体がドラッグ可能になります。

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

( D3 フォース レイアウト グラフを拡大する方法はありますか? )

ただし、この四角形は無制限にドラッグ可能であり、制限されたフォース レイアウトには適していません。どのように区切ることができますか？