Erstellen eines Diagramms in einem Merkzettel-Popup mit geoJson-Daten

Question

Ich arbeite an einer Karte, die ein Flugblatt verwendet und mit Daten aus einer Datei im GeoJson-Format gefüllt wird. Mein übergeordnetes Ziel besteht darin, für jeden Marker auf der Karte Diagramme in die Faltblatt-Popups einzufügen.

Die Markierungen für jedes Feature zu bekommen und die Popups zu öffnen war ziemlich einfach. Allerdings finde ich es schwierig, D3 zu verwenden, um das Popup hinzuzufügen.

Aus Gründen der Einfachheit ist mein Ziel im Moment, D3 zu verwenden, um eine Svg innerhalb jedes Faltblatts div zu erstellen und ein Quadrat zu zeichnen.

Ich habe einige Beispiele gefunden, wo Leute D3 benutzt haben, um Graphen innerhalb von Flugblatt-Popups zu erstellen, aber keiner von ihnen benutzte auch geoJson und die onEachFeature-Funktion. Dies ist eines der Beispiele: http://jsfiddle.net/6UJQ4/

Hier ist der relevante Teil meines Code:

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

Ich glaube, ich Fragen habe, weil D3 nicht die graph_container div findet jedoch bin ich ein wenig ratlos auf wie man das beheben kann.

Wenn jemand irgendwelche Erfahrungen mit D3, Leaflet und geoJson zusammen gemacht hat und mir erklären könnte, wie ich mein Quadrat in den Popups anzeigen kann oder wenn jemand eine Quelle kennt, die mir helfen könnte. Ich würde es sehr schätzen. Vielen Dank im Voraus!

UPDATE: Bits hat mein Problem gelöst! Wenn jemand ein funktionierendes Beispiel für die Verwendung D3 in Leaflet Popups in Kombination mit GeoJSON benötigt, geschrieben Bits es in den Kommentaren, aber ich werde es hier posten aswell: http://jsfiddle.net/2XfVc/132/

Answer 1

Sein ganz einfach, man muss nur hinzufügen und svg Element innerhalb von dein div. Und fange an, d3 zu codieren.

Gib mir einen Moment, ich aktualisiere deine Geige.

aktualisieren: Hier gehen Sie http://jsfiddle.net/6UJQ4/6/

ich mir die Freiheit zu vereinfachen/Stripping Ihr Beispiel Verwirrung zu reduzieren kleinsten gemeinsamen Nenner haben.

aktualisieren: http://jsfiddle.net/6UJQ4/7/

Im vorigen Geige, werden Sie über Probleme kommen, wo alle Ihre Markierungen werden jedes Mal geben zu unerwünschten Ergebnissen ausgewählt werden. Also benutze das letzte Update.