使用geoJson数据在单张弹出框内制作图形

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

获取每个功能的标记并使弹出窗口打开相当容易。但是，我发现使用D3添加到弹出窗口很困难。

为了简单起见，我目前的目标是使用D3在每个单张弹出窗格中创建一个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格但我有点难倒如何解决这个问题。

如果任何人有任何使用D3，Leaflet和geoJson的经验，可以向我解释如何让我的广场在弹出窗口中显示，或者如果有人知道可以帮助我的源代码。我会很感激。在此先感谢！

UPDATE：位已解决我的问题！如果有人需要与GeoJSON的组合传单弹出窗口使用D3的工作示例，位贴吧的评论，但我将它张贴在这里藏汉：http://jsfiddle.net/2XfVc/132/

来源

2014-01-30 Joel

您需要将该元素附加到DOM，然后才能在D3中使用它。 –

如何将弹出窗口内的元素附加到DOM？ – Joel

以D3的'.append（）'为例。你在'graph_container'中创建的实际上只是一个字符串，不会改变页面上的任何内容。 –

它很简单，你只需要添加和内部svg元你的div。并开始编码d3。

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

更新：在这里，你去http://jsfiddle.net/6UJQ4/6/

我把简化/剥你的榜样，以最小公分母，以减少混乱的自由。

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

在前面的小提琴，你会遇到您所有的标记将被选中，每次给予不想要的结果的问题。所以使用上次更新。

来源

2014-01-30 19:08:20 bits

我会试试看，谢谢！ – Joel

使用GeoJson时，是否可以在onEachFeature函数内将这个功能添加到标记中？ – Joel

为什么不呢？如果你可以做一个提取GeoJson数据的小提琴并且在你的问题中提到了那个代码，那么我可以看看它。 – bits

使用geoJson数据在单张弹出框内制作图形

回答

相关问题