Maison > Questions et réponses > le corps du texte
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粉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