使用 geoJson 数据在传单弹出窗口中制作图表 [英] Making a graph inside a leaflet popup using geoJson data
问题描述
我正在制作一张使用传单并由 GeoJson 格式文件中的数据填充的地图.我的首要目标是将图表放入地图上每个标记的传单弹出窗口中.
I'm working on a map that uses leaflet and is populated by data from a file in a GeoJson format. My overarching goal is to put graphs into the leaflet popups for each marker on the map.
获取每个功能的标记并打开弹出窗口相当容易.但是，我发现很难使用 D3 添加到弹出窗口.
Getting the markers for each feature and getting the popups to open was fairly easy. However, I am finding it difficult to use D3 to add to the popup.
为了简单起见，我目前的目标是使用 D3 在每个传单弹出 div 中创建一个 svg 并绘制一个正方形.
For the sake of simplicity my goal at the moment is to use D3 to create a svg within each leaflet popup div and draw a square.
我发现了一些示例，其中人们使用 D3 在传单弹出窗口中创建图形，但他们都没有使用 geoJson 和 onEachFeature 函数.这是示例之一:http://jsfiddle.net/6UJQ4/
I have found some examples where people have used D3 to create graphs inside leaflet popups, but none of them were also using geoJson and the onEachFeature function. This is one of the examples:http://jsfiddle.net/6UJQ4/
这是我的代码的相关部分:
Here is the relevant part of my code:
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，但是我对如何解决这个问题有点困惑.
I believe I am having issues because D3 can't find the graph_container div however I am a little stumped on how to fix this.
如果有人有一起使用 D3、Leaflet 和 geoJson 的经验，并且可以向我解释如何让我的方块显示在弹出窗口中，或者如果有人知道可以帮助我的来源.我会很感激的.提前致谢！
If anyone has any experience using D3, Leaflet, and geoJson together and could explain to me how to get my square to show in the popups or if anyone knows of a source that could help me. I would appreciate it a lot. Thanks in advance!
更新:Bits 解决了我的问题！如果有人需要在 Leaflet 弹出窗口中结合 GeoJson 使用 D3 的工作示例，Bits 将其发布在评论中，但我也会将其发布在这里:http://jsfiddle.net/2XfVc/132/
UPDATE: Bits has solved my problem! If anyone needs a working example of using D3 in Leaflet popups in combination with GeoJson, Bits posted it in the comments but I will post it here aswell: http://jsfiddle.net/2XfVc/132/
推荐答案
很简单，你只需要在你的 div 中添加 svg 元素.并开始编码 d3.
Its quite simple, you just need to add and svg element inside of your div. And start coding d3.
请稍等，我正在更新您的小提琴.
Give me a moment, I am updating your fiddle.
更新:给你http://jsfiddle.net/6UJQ4/6/
我冒昧地将您的示例简化/剥离为最小公分母以减少混淆.
I took the liberty of simplifying/stripping your example to lowest common denominator to reduce confusion.
更新:http://jsfiddle.net/6UJQ4/7/
在前面的小提琴中，您会遇到这样的问题，每次都会选择您的所有标记，并给出不想要的结果.所以使用上次更新.
In the previous fiddle, you will come across issues where all your markers will be selected everytime giving undesired results. So use last update.
这篇关于使用 geoJson 数据在传单弹出窗口中制作图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
