Question

我正在尝试在Leaflet弹出窗口中添加D3.js液体填充量规（http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6），但没有成功。

这是我的代码：

            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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
		}).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 = $('<div class="popupGraph" style="width: 200px; height:200px;"><svg id="gauge"/></svg></div>')[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);
            });

<!DOCTYPE html>
<html>
    <head>
        <title>Yepee</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/leaflet.css" />
        <script src="js/leaflet.js"></script>
        <script src="js/d3.js"></script>
        <script src="js/liquidFillGauge.js"></script>
        <script src="js/jquery-1.11.3.min.js"></script>
    </head>
    <body>
        <div id="map" style="width: 800px; height: 600px"></div>
<!--        <svg id="gauge"/>-->
        <script src="js/yepee.js" type="text/javascript"></script>
        
    </body>
</html>

当我试图显示地图时，我甚至看不到标记，我发现了这个错误：

TypeError：d3_window（...）为空

我还可以在不在我的地图上的svg元素上加载液体填充量规。

我尝试通过示例（http://jsfiddle.net/2XfVc/132/）在弹出窗口中添加一个简单的svg方块，并且它有效。

目标是将该量表放在传单中，尽管搜索了很长时间，但我找不到问题所在。

提前感谢您的回答。

Answer 1

当实际的SVG元素尚未添加到DOM时，您正尝试初始化量表。一旦弹出窗口打开，内容就会被添加到DOM中，当你应该初始化量表时。

// Have same content for all your popups
var content = '<svg id="gauge" width="100" height="100"></svg>'

// Set markers with popup, include content and set value as option
new L.Marker([0, -45]).bindPopup(content, {'value': 33}).addTo(map)
new L.Marker([0, 45]).bindPopup(content, {'value': 66}).addTo(map)

// Catch popup open event
map.on('popupopen', function (e) {
    // Initialize the gauge with current popup option's value
    loadLiquidFillGauge('gauge', e.popup.options.value);
})

关于Plunker的演示：http://embed.plnkr.co/2hMjBt/preview

在Leaflet弹出窗口中添加D3.js Liquid Fill gauge

1 个答案: