title: Adding a D3.js Liquid Fill gauge in a Leaflet popup
body: <p>I'm trying to add a D3.js liquid fill gauge (<a href="http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6" rel="nofollow">http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6</a>) in a Leaflet popup without succeeding.</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>            var map = L.map('map').setView([47.261491,-1.549244], 16);
              
              var dataCenterIcon = L.icon({
                          iconUrl: 'images/datacenter-icon.png',
                          iconSize:     [20, 20] // size of the icon
                          });
              
            L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                                  maxZoom: 19,
                                  attribution: '&amp;copy; &lt;a href="http://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt;'
    }).addTo(map);
  
  
              d3.json("data/datacentersSigma.json",function (data){L.geoJson(data,{
                  pointToLayer: function (feature,latlng){return L.marker(latlng,{icon:dataCenterIcon});},
                  onEachFeature : function (feature, layer) {
  
                      var div = $('&lt;div class="popupGraph" style="width: 200px; height:200px;"&gt;&lt;svg id="gauge"/&gt;&lt;/svg&gt;&lt;/div&gt;')[0];
                      var popup = L.popup().setContent(div);
  
                      layer.bindPopup(popup);
  
  //                    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");
                      loadLiquidFillGauge("gauge",55);
                  }}).addTo(map);});   
              
                  
              d3.json("data/trajetsFibreDCSigma.json",function (data){
                  L.geoJson(data, {
                  style: function(feature){return {color : feature.properties.stroke};}
                  }).addTo(map);
              });
  
   
                  </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Yepee&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;link rel="stylesheet" href="css/leaflet.css" /&gt;
          &lt;script src="js/leaflet.js"&gt;&lt;/script&gt;
          &lt;script src="js/d3.js"&gt;&lt;/script&gt;
          &lt;script src="js/liquidFillGauge.js"&gt;&lt;/script&gt;
          &lt;script src="js/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="map" style="width: 800px; height: 600px"&gt;&lt;/div&gt;
  &lt;!--        &lt;svg id="gauge"/&gt;--&gt;
          &lt;script src="js/yepee.js" type="text/javascript"&gt;&lt;/script&gt;
          
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I'm trying to display my map, I can't even see the markers and I've got this error:  </p>
  
  <p><strong>TypeError: d3_window(...) is null</strong></p>
  
  <p>I can also load a liquid fill gauge on a svg element which isn't on my map.</p>
  
  <p>I've tried to add just a simple svg square in the popup by following an example (<a href="http://jsfiddle.net/2XfVc/132/" rel="nofollow">http://jsfiddle.net/2XfVc/132/</a>) and it worked.</p>
  
  <p>The goal is to put that gauge in the leaflet popup and despite searching for a long time, I can't find what the problem is.</p>
  
  <p>Thank you in advance for your answers.</p>