Créez une carte avec D3 mais les données du pays n'apparaissent pas
J'ai créé une carte en utilisant D3 de topojson mais dans le HTML, les données du pays ne s'affichent pas encore.
Bonjour à tous !
J'ai généré une carte de l'Europe en utilisant d3 à partir d'un fichier topojson. C'est mon code
const svg =d3.select('body').append('svg').attr('width', width).attr('height', height);
const projection = d3.geoMercator().scale(600).center([13.439235,48.830666])
.translate([width / 2, height / 2]); // translate map to svg;
const path=d3.geoPath(projection);
const g = svg.append('g');
d3.json('./europe.topojson')
.then(data =>{
const countries = topojson.feature(data, data.objects.europe);
console.log(countries);
g.selectAll('path').data(countries.features).enter().append('path').attr('class', 'country').attr('d', path);
Le fichier topojson ressemble à ceci :
{"type":"Topology","objects":
{"europe":
{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon",
"properties":{"NAME":"Azerbaijan"},"id":"AZ","arcs":[[[0,1,2]],[[3]],[[4]],[[5,6,7,8,9,10],[11]]]},
{"type":"Polygon","properties":{"NAME":"Albania"},"id":"AL","arcs":[[12,13,14,15,16,17,18]]},
{"type":"MultiPolygon","properties":{"NAME":"Armenia"},"id":"AM","arcs":[[[-12]],[[19,-3,20,21,-7],[-5],[-4]]]},
{"type":"Polygon","properties":{"NAME":"Bosnia and Herzegovina"},"id":"BA","arcs":[[22,23,24,25,26,27,28,29,30,31]]},
...
-et fonctionne dans tous les pays-
La carte apparaît dans mon navigateur mais n'a aucun attribut de données (nom, identifiant).
Lorsque je console.log(countries), la console imprime les données de topojson, telles que le nom, l'identifiant, etc. Cela vient de la console :
0
:
{type: 'Feature', id: 'AZ', properties: {…}, geometry: {…}}
1
:
{type: 'Feature', id: 'AL', properties: {…}, geometry: {…}}
2
:
{type: 'Feature', id: 'AM', properties: {…}, geometry: {…}}
3
:
{type: 'Feature', id: 'BA', properties: {…}, geometry: {…}}
Avez-vous des idées ?
