Leaflet и D3js: Feature.properties не отображаются во всплывающем окне Leaflet

Question

Как добавить свойства объекта под диаграмму D3 во всплывающем окне Leafletjs?

У меня есть всплывающее окно и график, но я не могу добавить свойство 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 для тестирования. Как видите, всплывающие окна работают, но не могут отобразить свойства объекта под диаграммой.

Спасибо за любую помощь...

Answer 1

I'm seeing multiple possible issues.

You are opening a <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

---

В заключение, чтобы решить вашу проблему, измените одну строку var div = ... в вашем 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));