WebixとD3.jsを使ってレスポンシブな地図を作成する
Webix Advent Calendar 2014 １７日目の記事です。
グラフに引き続き、WebixとD3を使ってレスポンシブな地図を描画します。
コンポーネントとして表示した地図はウインドウや境界線を移動した際に、自動的にコンポーネントのサイズにグラフがリサイズされます。
サンプル
前回作成したカスタムコンポーネントを使用します。
■ 地図を描画する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
var japan_map = { view:"d3-chart", resize:true, url:"http://shimz.me/example/d3js/_geodata/ken.geojson", ready:function(){ var scale = Math.floor( (this.$width + this.$height) /2) ;//地図が収まるスケールを取得 var regulate = 1.8; //スケールを調整 var projection = d3.geo .mercator() //投影法の指定 .scale(scale * regulate) //スケール（ズーム）の指定 .translate([scale/2, scale/2]) //表示位置の指定 .center([139.0032936, 36.3219088]); //中心の座標を指定 //パスジェネレーター生成 var path = d3.geo.path().projection(projection); //コンポーネント内にsvgを埋め込む var svg = d3.select(this.$view) .append("svg") .attr({ "width": this.$width, "height": this.$height }); //地図を描画する var map = svg.append("svg:g") .selectAll("path") .data(this.data.features) .enter() .append("svg:path") .attr({ "d": path, "fill": "green", "fill-opacity": 0.5, "stroke": "black" }) } } |
ポイントは６・７行目でのスケールの設定ぐらいです。
地形に合わせてregulateの値を調整してください。
日本のように縦に細長い地形だと、どうしてもコンポーネント内に余白ができてしまいます。この辺は、沖縄を移動して表示するなど試行錯誤する必要があります。
