recherche

Maison  >  Questions et réponses  >  le corps du texte

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 ?

P粉285587590P粉285587590264 Il y a quelques jours441

répondre à tous(1)je répondrai

  • P粉242535777

    P粉2425357772024-04-03 09:36:23

    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

    répondre
    0
  • Annulerrépondre