Ініціювати карту даних D3.js з новими даними - json, d3.js

Я йду з основним прикладом тут окрім того, що я повинен бути в змозі оновити карту на основіна нових даних (файл json.) Я не міг знайти спосіб завантажувати дані безпосередньо в об'єкт Datamap, тому я завантажую його за допомогою D3.json і використовую команду для оновлення карти. З якихось причин функція popupTemplate отримує нульовий об'єкт даних, і я не знаю, як це виправити.

Що це найкращий спосіб зробити?

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://datamaps.github.io/scripts/datamaps.world.min.js"></script>
<script src="http://datamaps.github.io/scripts/topojson.js"></script>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>

<script>
var data;

var map = new Datamap({
element: document.getElementById("container"),
fills: {
HIGH: "#afafaf",
LOW: "#123456",
MEDIUM: "blue",
UNKNOWN: "#FFFFFF",
defaultFill: "green"
},
geographyConfig: {
popupTemplate: function(geo, data) {
console.log(data)
return ["<div class="hoverinfo"><strong>",
"Number of things in " + geo.properties.name,
": " + data[geo.id].numberOfThings,
"</strong></div>"].join("");
}
}
});
map.legend();


d3.json("path/to/data.json", function(error, json) {
if (error) return console.warn(error);

data = json;
map.updateChoropleth(data);
});
</script>

Це мій файл json:

{
"IRL": {
"fillKey": "LOW",
"numberOfThings": "2002"
},
"USA": {
"fillKey": "MEDIUM",
"numberOfThings": "10381"
}
}

Щоб полегшити налагодження, я ставлю jsfiddle

Відповіді:

Я не мав проблем із завантаженням даних безпосередньовсередині Datamap. У будь-якому випадку, я також моделював оновлення даних ... колір оновлюється, але не значення (numberOfThings). У прикладі в навчальному посібнику не зрозуміло, що це можна зробити, хоча має сенс, що потрібно змінювати значення.

Я залишаю вас з FIDDLE показує результати мого експерименту.

Пара нот:

• Я вважаю, що ваше спливаюче вікно не показувалося, тому що його потрібно повертати бути data.numberOfThings.
• Якщо я не помиляюся, коли я грав з цим раніше, якщо у вас немає даних для країни, то спливаюче вікно не оновлюється і відображається таке ж значення, як і для останньої країни з даними.

@Kiarash, тут є дві проблеми:

1. Ви використовуєте Datamaps з сайту datamaps.github.io, який я не рекомендую, оскільки я не можу гарантувати надійність (uptime) або зворотну сумісність. Найкраще завантажувати його з Сторінка проекту Github
2. data не матиме властивості з назвою країни, доступ до нього має бути подібним data.numberOfThings.

Ось робоча версія наданого вами коду