單張及D3js：Feature.properties不是在單張顯示彈出

Question

如何在一個Leafletjs彈出一個D3圖表下添加功能性？

我得到了彈出式和圖表的工作，但我似乎無法添加圖表下面的feature.properties。

這裏是我的GeoJSON的數據樣本：

var myData = [{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"Name":"Gulran","Province":"Hirat","Ethnic1":0.19,"Ethnic2":0.32,"Ethnic3":"0.10","Ethnic4":"0.00","Ethnic5":"0.10","Ethnic6":"0.00"},"geometry":{"type":"Polygon","coordinates":[[[60.941162109375,29.897805610155874],[61.92993164062499,31.034108344903512],[63.34716796874999,31.3348710339506],[64.05029296875,30.401306519203583],[64.412841796875,29.735762444449076],[64.09423828125,29.36302703778376],[62.29248046875,29.36302703778376],[60.941162109375,29.897805610155874]]]}},{"type":"Feature","properties":{"Name":"Chahar Burjak","Province":"Nimroz","Ethnic1":0.25,"Ethnic2":0.12,"Ethnic3":0.03,"Ethnic4":0.01,"Ethnic5":"0.00","Ethnic6":"0.00"},"geometry":{"type":"Polygon","coordinates":[[[63.38012695312499,31.3348710339506],[65.06103515625,31.80289258670676],[65.6982421875,31.156408414557],[66.016845703125,30.467614102257855],[65.291748046875,30.164126343161097],[64.22607421875,30.0405664305846],[63.38012695312499,31.3348710339506]]]}}]}]; 

這裏是我的彈出代碼：

var popup = L.popup({minWidth: 600}).setContent(div); 
     layer.bindPopup(popup + '<br>' + feature.properties.NAME); 

這裏是我的jsfiddle code測試。正如您所看到的，彈出窗口正在工作，但無法獲取要在圖表下顯示的功能屬性。

感謝您的幫助......

Answer 1

我看到多個可能的問題。

您正在打開一個<svg>元素，但你沒有關閉它。如果添加文本這樣它會被「吞噬」，並呈現<svg>here</svg>內結束，但D3繪製的圖表將其隱藏：

：

// won't show the text 
var div = $('<div id="chart" style="width: 600px; height: 400px;"><svg>here is some text</div>')[0]; 

您可以通過使用一個自閉<svg/>修復

var div = $('<div id="chart" style="width: 600px; height: 400px;"><svg/><br/>here is some text</div>')[0]; 

下一個問題是，你正嘗試將L.popup對象與字符串相結合：

layer.bindPopup(popup + 'here is some text'); 

因爲這L.popup是一個對象，您不能簡單地將文本連接到它。結果如下所示："[object Object]here is some text"。

然後你正在使用feature.properties.NAME這是行不通的，因爲你的GeoJSON屬性鍵被命名爲Name（注意大小寫） - 使用來代替：feature.properties.Name

---

總之，解決你的問題改變的人在onEachFeature_LMA功能線​​這樣的：

var div = $('<div id="chart" style="width: 600px; height: 400px;"><svg/><br/>'+feature.properties.Name+'</div>')[0]; 

---

由於您使用的是jQuery，如果您想添加更多圖表，其他HTML元素稍後還可以生成如下彈出窗口的HTML：

var div = $('<div id="chart" style="width: 600px; height: 400px;"><svg/></div>')[0]; 
    var div2 = $('<div></div>').html(feature.properties.Name); 
    $(div).append($(div2));