Leaflet 和 D3js：Feature.properties 未显示在 Leaflet 弹出窗口中

Question

如何在 Leafletjs 弹出窗口中的 D3 图表下添加特征属性？

弹出窗口和图表正常工作，但我似乎无法在图表下方添加 feature.properties。

Here's a sample of my geoJSON data:

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]]]}}]}];

Here's my popup code:

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

这是我要测试的 jsfiddle code。如您所见，弹出窗口可以正常工作，但无法让要素属性显示在图表下方。

感谢您的帮助...

Answer 1

我发现了多个可能的问题。

您正在打开一个 <svg> 元素，但没有关闭它。如果你像这样添加文本，它会得到 "swallowed" 并在呈现的 <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 = ... 更改为：

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

Leaflet 和 D3js：Feature.properties 未显示在 Leaflet 弹出窗口中

Leaflet and D3js: Feature.properties are not showing in Leaflet popup

d3.js

leaflet

mapbox