markerClusterGroup内のデータを集計する

var markers = L.markerClusterGroup({ iconCreateFunction: defineClusterIcon });

L.markerClusterGroup関数でmarkerClusterGroupオブジェクトを作成する。iconCreateFuncitionオプションを指定することでicon描画用の関数を指定することができる。

こちら を参考にして、円グラフを描画する。

var marker = L.marker([sampleData.latitude, sampleData.longitude], { icon: myIcon });

ここではmyIconに円グラフのHTMLタグをIcon化したものを引き渡している。

var popupContent = "<table><tr><td>date</td><td>" + sampleData.date + "</td></tr>";
pieInputList.forEach(fishData => {
    popupContent = popupContent + "<tr><td>" + fishData.name + "</td><td>" + fishData.value.toFixed(2) + "</td></tr>";
})
popupContent = popupContent + "</table>"

var popup = L.popup().setContent(popupContent);
marker.bindPopup(popup);

個々の円グラフで表示するポップアップをtableタグで作成する。L.popup().setCOntentでポップアップの中身が設定されたpopupオブジェクトを作成。

function defineClusterIcon(cluster) {
    var children = cluster.getAllChildMarkers();
    var iconRadius = radius + 0.05 * children.length;

    var clusterData = { fish: {} };
    var total = 0;

    children.forEach(child => {
        var sampleData = child._popup._content;
        sampleData = sampleData.split("</tr>");
        for (var i = 1; i < sampleData.length - 1; i++) {
            var fishData = sampleData[i].split("</td><td>");
            var fishName = fishData[0].replace("<tr><td>", "");
            var fishStock = parseFloat(fishData[1].replace("</td>", ""));
            if (fishName in clusterData.fish) {
                clusterData.fish[fishName] += parseFloat(fishStock);
            } else {
                clusterData.fish[fishName] = parseFloat(fishStock);
            }
            total += parseFloat(fishStock);
        }
    })

    var magnification = 100 / total;

    Object.keys(clusterData.fish).forEach(fishName => {
        clusterData.fish[fishName] = clusterData.fish[fishName] * magnification;
    });

    var pieInputList = createPieInput(clusterData);

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

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

    //pieチャートSVG要素の設定
    tmp.append("svg").attr("transform", "translate(" + (-1 * iconRadius) + "," + (-1 * iconRadius) + ")").attr("height", iconRadius * 2 + radius).attr("width", iconRadius * 2 + radius)
        .append("g").attr("transform", "translate(" + iconRadius + "," + iconRadius + ")")
        .selectAll(".pie")
        .data(pie(pieInputList))
        .enter()
        .append("g")
        .attr("class", "pie")
        .append("path")
        .attr("d", arc)
        .attr("fill", function (d) { return color(d.index) })
        .attr("opacity", 0.75) //透過を指定するプロパティ
        .attr("stroke", "white"); //アウトラインの色を指定するプロパティ

    var myClusterIcon = L.divIcon({
        html: tmp.html(),
        className: 'marker-cluster'
    });

    tmp.select("svg").remove();

    return myClusterIcon;
}

以下上のコードの説明

var children = cluster.getAllChildMarkers();

getAllChildMarkersメソッドで、クラスター内の子要素を取得する。

var iconRadius = radius + 0.05 * children.length;

children.lengthで子要素の数を取得し、この値を元に円グラフの半径を設定する。（子要素が多いほど半径を大きくする）

var clusterData = { fish: {} };
var total = 0;

children.forEach(child => {
    var sampleData = child._popup._content;
    sampleData = sampleData.split("</tr>");
    for (var i = 1; i < sampleData.length - 1; i++) {
        var fishData = sampleData[i].split("</td><td>");
        var fishName = fishData[0].replace("<tr><td>", "");
        var fishStock = parseFloat(fishData[1].replace("</td>", ""));
        if (fishName in clusterData.fish) {
            clusterData.fish[fishName] += parseFloat(fishStock);
        } else {
            clusterData.fish[fishName] = parseFloat(fishStock);
        }
        total += parseFloat(fishStock);
    }
})

var magnification = 100 / total;

Object.keys(clusterData.fish).forEach(fishName => {
    clusterData.fish[fishName] = clusterData.fish[fishName] * magnification;
});