Inicie o mapa de dados D3.js com novos dados - json, d3.js

Eu estou indo com o exemplo básico em Aqui exceto eu preciso ser capaz de atualizar o mapa com baseem novos dados (um arquivo json). Eu não conseguia encontrar uma maneira de carregar os dados diretamente dentro do objeto Datamap, então eu estou carregando-o com D3.json e usando o comando para atualizar o mapa. Por algum motivo, a função popupTemplate está recebendo um objeto de dados nulo e não sei como corrigi-lo.

Qual é a melhor forma de fazer isso?

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

Este é o meu arquivo json:

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

Para facilitar a depuração, eu uso jsfiddle

Respostas:

Não tive problemas ao carregar os dados diretamentedentro do Datamap. Em qualquer caso, eu também simulei uma atualização de dados ... a cor é atualizada, mas não o valor (numberOfThings). No exemplo do tutorial, não está claro se isso pode ser feito, embora faça sentido que seja possível atualizar os valores.

Eu estou deixando você com o FIDDLE mostrando os resultados da minha experiência.

Um par de notas:

• Acredito que o seu pop-up não estava aparecendo porque sua string de retorno precisa ser estar data.numberOfThings.
• Se não me engano quando joguei com isso antes, se você não tiver dados para um país, o pop-up não será atualizado e o mesmo valor do último país com dados será exibido.

@ Kiarash, existem dois problemas aqui:

1. Você está usando os Datamaps do site datamaps.github.io, que eu não recomendo, pois não posso garantir confiabilidade (uptime) ou compatibilidade com versões anteriores. Você é melhor baixá-lo do Página do projeto do Github
2. data não terá uma propriedade com o nome do país, deve ser acessado como data.numberOfThings.

Aqui está uma versão funcional do código que você forneceu