問題タブ [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.
vue.js - vueでd3-zoomを正しく設定するには?
会場の座席をレンダリングする svg があります。すべての座席はセクターごとにグループ化されています。座席クリックイベントが必要で、そのセクターにある座席をズームインします。別のセクターをクリックすると、ズームアウトして新しいセクターに再びズームインする必要があります。これが私が望む例です: https://observablehq.com/@d3/zoom-to-bounding-box?collection=@d3/d3-zoom .
現在、svgPanZoom.js ライブラリを使用して svg を操作しています (viewBox の代わりにマトリックスを使用していることがわかります)。D3 は少し難しいように思えました。上記の例のように、d3 の代わりにできることをアドバイスしてもらえますか?
これが私のコードです：
svg - SVG 内の要素をズームする際の問題
SVG 内で生成された要素 (有向グラフ) にズームを適用することに行き詰まりました。元のコードは d3js v3 ライブラリを使用しており、以下に示されています。
ズーム機能に関するコードを再利用しようとしましたが、役に立ちませんでした。これを適用すると、一般にネットワークが「フリーズ」し、ネットワークと対話できなくなります (ノードを個別に移動できません)。つまり、すべての要素が全体として移動します。生成されたグラフの特性に影響を与えずにズームを適用するにはどうすればよいですか?