Creating graph inside a specific leaflet popup using select by id

Question

I have a leaflet map and trying get it to work with D3.

I use a GeoJSON file to create leaflet popups for each feature.

Now I want to create a graph in a specific popup. I tried to select it by #ID. But that didn't work.

As a source I used this Stackoverflow question

To make my point more clear I created a JSFiddle

ghybs ghybs · Accepted Answer · 2018-01-25T12:05:32

If your JSFiddle example, you create the same popup content with an <svg> tag and apply some SVG content using d3, for all of your GeoJSON features (i.e. within onEachFeature).

If I understand correctly, you would like to create SVG content only for specific features' popup. So you tried to set some ID on the popup.

A straight forward solution would be to simply create your specific SVG content only for the features of interest.

You can access the feature properties with feature.properties to know whether it should have a special popup content or not:

onEachFeature: function(feature, layer) {
  var div = $('<div id="' + feature.properties.name + '" style="width: 200px; height:200px;"><svg/></div>')[0];
  var popup = L.popup().setContent(div);

  layer.bindPopup(popup);

  if (feature.properties.name === 'test1') {
    var svg = d3.select(div).select("svg").attr("width", 200).attr("height", 200);
    svg.append("rect").attr("width", 150).attr("height", 150).style("fill", "lightBlue");
  }
}

Updated JSFiddle: https://jsfiddle.net/1hpfcryc/4/

Creating graph inside a specific leaflet popup using select by id

1 Answers