ドラッグ可能で無限スクロールできるSVG

マウス操作のドラッグによるパン（平行移動）と、マウスホイールによる拡大縮小ができます。
D3.jsのd3.zoom()を使っています。

ソース：

https://github.com/yo16/d3js_prac/tree/main/prac_20241112

技術説明

２次元データを、Map()で管理します。キーは、x座標、y座標を使った `${x},${y}`の文字列
データをD3.jsで扱うときには、Map形式から１次元配列へ変換します。
パンまたは拡大縮小したタイミングで表示されている画面範囲から、作り出すべきデータを判定し、１マスごとに作っています。今回はただの四角形ですが、位置ごとに異なる情報を計算することも可能です。

詳細な技術説明は、Qiitaの記事をご覧ください。