d3.js - d3.behavior.zoom のパンを無効にするには?

Question

この質問はこれと非常によく似ていますが、d3.behavior.zoom を使用できるかどうかはまだわかりませんが、パン機能はありません。つまり、ホイールのみを使用してズームイン/ズームアウトしたいだけです。

その理由は、「ズーム可能な」領域をブラッシングできるようにしたいからです。

ありがとう！

Answer 1

ズーム動作を定義したとします:

var zoom = d3.behavior.zoom().on('zoom', update);

選択範囲にズーム動作を適用すると、特定の操作を検出して応答するために内部で使用するイベント リスナーの登録を解除できます。あなたの場合、次のようなことをしたいでしょう：

selection.call(zoom)
    .on("mousedown.zoom", null)
    .on("touchstart.zoom", null)
    .on("touchmove.zoom", null)
    .on("touchend.zoom", null);

タッチイベントを削除したいかどうかわかりません。そうすることで、ダブルタップによるズームがなくなる場合があります。それらを試してみてください。

Answer 2

この問題に対処するために私が見つけた回避策を共有することは良いことだと思います. 私がしたことは、ブラシの開始時にリスナーを使用してズームを「非アクティブ化」することです。

zoom.on("zoom",null);
selection.call(zoom);

ブラシエンドイベントで再度アクティブにします。

考慮すべきもう 1 つのトリックがあります。これは、最後の有効なズーム インタラクションのスケール値とトランジション値を保存することが重要であるという事実から来ています。これにより、このようなブラシエンドイベントでブラシをアクティブ化するときにこれらの値を使用できます。

zoom.scale(lastEventScale).translate(lastEventTranslate).on("zoom",drawZoom);
selection.call(scatterZoom);

この問題に対する他のより「エレガントな」解決策を聞きたいです。

Answer 3

私が見つけた解決策の 1 つは、ズーム対応の要素 (兄弟である必要があります) の前に rect 要素を貼り付け、ズーム操作を無効にしたい場合は塗りつぶしを「透明」に設定し、必要な場合は「なし」に設定することでした。ズーム操作を有効にします。それは次のように見えました：

if (chart._disableZoom) {
    var rootPanel = d3.select('.rootPanel'); // this is the parent of the element that can be zoomed and panned
    if (!rootPanel.select('.stopEventPanel').node()) { // create panel if it doesn't exist yet
       //.stopEventPanel is appended next to the zoom-enabled element
        rootPanel.append('rect').attr('class', 'stopEventPanel').attr('width', renderConfig.width).attr('height', renderConfig.height).attr('fill', 'transparent');
    } else { // disable zoom and pan
        rootPanel.select('.stopEventPanel').attr('fill', 'transparent');
    }
} else { // enable zoom and pan
    d3.select('.rootPanel').select('.stopEventPanel').attr('fill', 'none');
}