Я работаю над картой, которая использует буклет и заполняется данными из файла в формате GeoJson. Моей главной целью является размещение графиков во всплывающих окнах для каждого маркера на карте.

Получить маркеры для каждой функции и открыть всплывающие окна было довольно легко. Тем не менее, мне трудно использовать D3 для добавления во всплывающее окно.

Для простоты моя цель на данный момент - использовать D3, чтобы создать svg внутри каждого всплывающего окна листовки и нарисовать квадрат.

Я нашел несколько примеров, когда люди использовали D3 для создания графиков во всплывающих окнах листовок, но ни один из них также не использовал geoJson и функцию onEachFeature. Это один из примеров:http://jsfiddle.net/6UJQ4/

Вот соответствующая часть моего кода:

L.geoJson( data,  {
    style: function (feature) {
        return { opacity: 0, fillOpacity: 0.5, fillColor: "#0f0" };
    },
    onEachFeature: function(feature, layer){

        var graph_container = '<div class="popupGraph" id="graph" style="width: 200px; height:200px;"></div>';

        layer.bindPopup(feature.properties.name + '<br>' + graph_container);    

        var svg = d3.select("#graph").selectAll("svg").append("svg").attr("width", 50).attr("height", 200);   

        var rectangle = svg.append("rect").attr("width", 25).attr("height", 25);

    }
}).addTo(map);

Я считаю, что у меня есть проблемы, потому что D3 не может найти div graph_container, однако я немного озадачен тем, как это исправить.

Если у кого-то есть опыт совместного использования D3, Leaflet и geoJson, и он мог бы объяснить мне, как сделать так, чтобы мой квадрат отображался во всплывающих окнах, или если кто-нибудь знает источник, который мог бы мне помочь. Я был бы очень признателен. Заранее спасибо!

ОБНОВИТЬ: Биты решили мою проблему! Если кому-то нужен рабочий пример использования D3 во всплывающих окнах Leaflet в сочетании с GeoJson, Битс разместил его в комментариях, но я также опубликую его здесь:http://jsfiddle.net/2XfVc/132/