問題タブ [svgpanzoom]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - svgPanZoom: マウスの中ボタンを使用したパンのみ
マウスの中央ボタンが押されたときにのみパンする簡単な方法はありますか? デフォルトの動作では、マウス ボタンが押された (またはタッチされた) ものは何でもパンします。
beforepan有望に見えましたが、何がパンニングを引き起こしたのかを知らずに、古い位置と新しい位置しか取得できません。
おそらく を使用して動作させることができますがcustomEventsHandler、いくつかの簡単なチェックのために多くの余分な作業が必要なようです.
d3.js - レイアウト内の d3 ダイアグラムのミニマップ ビュー?
d3 ダイアグラムを使用して、ヘリコプター ビュー (またはミニマップ ビュー) をレイアウトに含めたいと思います。ariutta の svg-pan-zoomを使用していますが、サムネイル ビューが期待どおりに動作しません。多くのテストの後、私はそれを取得する方法を見つけませんでした。提案をいただければ幸いです。
ここに、私が持っているものを簡略化したバージョンの jsfiddle があります。簡単にするために、コードの大部分が削除され、d3noob ツリー図が使用されています。dhtmlxも使用していますが、この部分もこの jsfiddle から削除されています (後で含めることを検討できます): jsfiddle とコード
これは私が取得したいものです: ここに画像の説明を入力してください
ダイアグラムをサムネイル ビューで表示するために、d3 チャートはエンコード (base64)され、サムネイル ビューの背景画像として使用されます (src としても試行されます)。
考えられる原因：
- dhtmlx
- 動的 SVG
- エンコードされた (base64) svg
前もって感謝します！
これはコードの単純化されたバージョンです (dhtmlx を使用していません)。
HTML コード
メインの JS コード (thumbnailViewer.js と svg-pan-zoom.js が必要ですが、ここには含まれていません)
CSS コード
svgpanzoom - コンテナーが非表示になると SVG-PanZoom が機能しない
Tabbing-Component に埋め込まれた SVG-Pan-Zoom インスタンスがあります。アクティブなタブが変わると、前のタブは で非表示になりdisplay: noneます。最初のタブ ( で再び表示されますdisplay: block) に戻ると、svgPanZoom インスタンスは使用できない状態になります。何が起こっているのかよくわかりません。
この動作は Google Chrome でのみ再現できました。
これをテストする例を作成しました: http://svgpan-example.bitballoon.com/
これはバグですか、それとも何か不足していますか?