Créez une carte avec D3 mais les données du pays n'apparaissent pas

Question

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 ?

Answer 1

Il n'est pas clair où vous vous attendez à voir les propriétés de chaque fonction. Dans le code que vous avez partagé, vous n'avez jamais utilisé ces données.

Si tout ce que vous voulez, c'est quelques balises, vous pouvez suivre cet exemple

https://observablehq.com/@rahulbot/us-map-with -tag