Leaflet地図上に円グラフをマーカーとして表示する

Leafletで描画した地図に円グラフをマーカーとして表示する。

円グラフをマーカーとするには、divIconオブジェクトを作成し、D3.jsで作成した円グラフのHTMLをhtmlオプションの引数として与える。

これをIconとして、L.marker関数に渡せばよい。

var radius = 20;

//地図を描画するDOM要素を選択し、デフォルトの緯度経度、縮尺を設定。
var map = L.map("map").setView([35.7, 139.7], 5);

//地図データの取得元とZoom範囲を設定する。
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { minZoom: 2, maxZoom: 18 }).addTo(map);

L.map関数で地図を描画する要素を指定し、setViewメソッドでデフォルトの緯度経度、縮尺を選択。

L.tileLayer関数でタイルサーバと最大・最小の縮尺を指定し、addToメソッドでmapオブジェクトに渡す。

var tmp = d3.select("#tmp");

グラフ一時描画用のDOM要素を選択。コード上では円グラフがこの要素内に描画されるが、すぐに削除するので表示はされない。

//色の設定(scaleOrdinalはRangeで指定した色を繰り返して使用)
var color = d3.scaleOrdinal()
    .range(["#DC3912", "#3366CC", "#109618", "#FF9900", "#990099", "#998889", "#1459AF"]);

//pieチャートデータセット用関数の設定
var pie = d3.pie()
    .value(function (d) { return d.value; })
    .sort(null);

var arc = d3.arc()
    .outerRadius(radius)
    .innerRadius(radius / 3);

d3.scaleOrdinalでグラフの色のScaleを作成。scaleOrdinal関数では、rangeメソッドで与えた色のリストを繰り返して渡す。

d3.pie関数で、pieチャート用のデータセットを作成。

d3.arcで円弧を描画する。outerRadiusで外円の弧を、innerRadiusで内円の弧を描画する。