Question

我正在使用传单的地图上工作，并使用GeoJson格式的文件中的数据填充。我的首要目标是将图表放入地图上每个标记的小册子弹出窗口中。

获取每个功能的标记并让弹出窗口打开非常简单。但是，我发现很难使用D3添加到弹出窗口。

为了简单起见，我目前的目标是使用D3在每个传单popup div中创建一个svg并绘制一个正方形。

我找到了一些人们使用D3在传单弹出窗口中创建图形的例子，但是没有人使用geoJson和onEachFeature函数。这是其中一个例子：http://jsfiddle.net/6UJQ4/

以下是我的代码的相关部分：

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

我相信我遇到了问题，因为D3无法找到graph_container div但是我对如何解决这个问题感到有些困惑。

如果有任何人有使用D3，Leaflet和geoJson的经验，可以向我解释如何让我的方块显示在弹出窗口中，或者是否有人知道可以帮助我的源。我会很感激。提前谢谢！

更新：Bits解决了我的问题！如果有人需要在Leaflet弹出窗口中结合GeoJson使用D3的工作示例，Bits会在评论中发布它，但我会在此发布它：http://jsfiddle.net/2XfVc/132/

Answer 1

非常简单，你只需要在div中添加svg元素。并开始编码d3。

给我一点时间，我正在更新你的小提琴。

更新：您可以转到http://jsfiddle.net/6UJQ4/6/

我冒昧地将你的例子简化/剥离到最低标准，以减少混淆。

更新：http://jsfiddle.net/6UJQ4/7/

在之前的小提琴中，您会遇到一些问题，每次都会选择所有标记，从而产生不良结果。所以使用上次更新。

使用geoJson数据在传单弹出窗口中创建图形

1 个答案: