v2でズームを実装すると、d3.js v3で強制グラフが破損するのはなぜですか？

Question

私はd3.jsを使用して作成した強制レイアウトを持っています

ドラッグ可能なフォースレイアウトの通常の機能とズーム機能の両方を望みます。

私は基本的にこの（http://jsfiddle.net/nrabinowitz/QMKm3/）コードからズームコードをコピー/ペーストしました。これは、この（http://bl.ocks.org/mbostock/3680957）の例でMike Bostockが使用するズームと同じ方法です。ここで

は私のコードです：http://jsfiddle.net/kM4Hs/6/

はっきり鉱山で見られるように、ズームが正常に動作しますが、私は力のレイアウト内の単一ノードを選択し、それらを周りにドラッグすることができません。

私は、他の両方の著者が私が使用している新しいd3.v3.jsではなくd3.v2.jsを使用しているという事実であることを発見しました。インポートをv2に変更すると、完全に機能します。しかし、進歩と一般的な優れたコードネームのために、可能ならばv3を使いたいと思っています。

<script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script> 

        versus 

<script type='text/javascript' src='http://d3js.org/d3.v2.min.js'></script> 

つの質問：なぜ何も、それを修正する場合、私は、何を行うことができ、より重要なのは、v2はないときに力のレイアウトを壊し、およびv3のでしょうか？

ありがとうございます！

Answer 1

release notesをよく読んで、2.x（2.10.3）の最終リリースと3.2.7の最新リリースの間に変更されたすべての説明が表示されます。具体的には、リリース3.2.2から：デフォルトの動作を防止または伝播を停止しないことによりd3.behavior.drag、d3.behavior.zoomとd3.svg.brushのドラッグジェスチャーの

処理を改善。たとえば、mousedownはフォーカスを変更し、iframeの外側のマウスアップが正しく機能し、タッチスタートがしつこくなくなります。

したがってV2では、ズームイベントの伝搬を停止することによってドラッグ動作がズーム動作よりも優先される可能性があります。 V3では、これはもはや自動的には発生せず、どのような動作が優先されるかをいつでも選択することができます。

あなたはノードをドラッグするとき、これらのイベントが同時にズーム動作によってパンと解釈されないようにをドラッグしながら、あなたが入力イベントにstopPropagationに必要ドラッグ動作の優先順位を与えたい場合。 dragstart上の伝播を停止するのに十分である。

var drag = d3.behavior.drag() 
    .on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); }) 
    .on("drag", function() { /* handle drag event here */ }); 

力レイアウトを使用している場合、コードは：

var drag = force.drag() 
    .on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); }); 

実施例：

注：これら2つの動作手段を組み合わせますそのジェスチャーの解釈はあいまいであり、位置に非常に敏感です。円のクリックはその円をドラッグすると解釈されますが、1ピクセル離れたところのクリックは背景をパンすると解釈されます。これらの行動を組み合わせるより堅牢な方法は、モダリティを採用することです。たとえば、ユーザーがスペースキーを押し続けている場合、クリック位置に関係なく、クリックしてドラッグすると、ドラッグするのではなくパンとして解釈されます。このアプローチは、Adobe Photoshopなどの商用ソフトウェアで一般に採用されています。