WebixとD3.jsを使ってレスポンシブな地図を作成する

最終更新日

Webix Advent Calendar 2014 17日目の記事です。

グラフに引き続き、WebixとD3を使ってレスポンシブな地図を描画します。
コンポーネントとして表示した地図はウインドウや境界線を移動した際に、自動的にコンポーネントのサイズにグラフがリサイズされます。

サンプル

webix + D3 Responsive Map

example

前回作成したカスタムコンポーネントを使用します。

■ 地図を描画する

ポイントは6・7行目でのスケールの設定ぐらいです。
地形に合わせてregulateの値を調整してください。
日本のように縦に細長い地形だと、どうしてもコンポーネント内に余白ができてしまいます。この辺は、沖縄を移動して表示するなど試行錯誤する必要があります。