javascript - Kaavion tekeminen Leafletin popupissa käyttäen geoJson-dataa

Työskentelen kartan parissa, joka käyttää Leafletia ja jota täytetään tiedoston tiedoilla GeoJson-muodossa. Yleinen tavoitteeni on laittaa kaavioita Leafletin ponnahdusikkunoihin jokaiselle kartan merkille.

Jokaisen ominaisuuden merkkien saaminen ja ponnahdusikkunoiden avaaminen oli melko helppoa. Kuitenkin minun on vaikea käyttää D3:ta lisätäkseni ponnahdusikkunaan.

Yksinkertaisuuden vuoksi tavoitteeni tällä hetkellä on käyttää D3:ta luodakseni SVG:n jokaiseen Leafletin ponnahdusikkunan diviin ja piirtääkseni neliön.

Olen löytänyt joitakin esimerkkejä, joissa ihmiset ovat käyttäneet D3:ta luodakseen kaavioita leaflet-popupien sisällä, mutta kukaan heistä ei käyttänyt myös geoJsonia ja onEachFeature-funktiota. Tässä on yksi esimerkeistä: http://jsfiddle.net/6UJQ4/

Tässä on olennaisin osa koodistani:

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);

Uskon, että minulla on ongelmia, koska D3 ei löydä graph_container-diviä, mutta olen hieman jumissa sen kanssa, miten korjata tämä.

Jos jollakulla on kokemusta D3:n, Leafletin ja geoJsonin käytöstä yhdessä ja voisi selittää minulle, miten saan neliöni näkymään ponnahdusikkunoissa, tai jos joku tietää lähteen, joka voisi auttaa minua, arvostaisin sitä todella paljon. Kiitos etukäteen!

PÄIVITYS: Bits ratkaisi ongelmani! Jos joku tarvitsee toimivan esimerkin D3:n käytöstä Leaflet-popupeissa yhdessä GeoJsonin kanssa, Bits julkaisi sen kommenteissa, mutta julkaisen sen myös täällä: http://jsfiddle.net/2XfVc/132/

Vastaus #1

Se on melko yksinkertaista, sinun tarvitsee vain lisätä svg-elementti divisi sisälle. Ja aloittaa d3:n koodaus.

Anna minulle hetki, päivitän sinun fiddlessäsi.

Päivitys: Tässä sinulle http://jsfiddle.net/6UJQ4/6/

Otin vapauden yksinkertaistaa/poistaa esimerkkisi ylimääräiset osat vähiten yhteiseen nimittäjään vähentääkseni sekaannusta.

Päivitys: http://jsfiddle.net/6UJQ4/7/

Edellisessä fiddlessä kohtaat ongelmia, joissa kaikki merkintäsi valitaan aina, mikä antaa ei-toivottuja tuloksia. Käytä siis viimeisintä päivitystä.