Karte mit D3 erstellen, aber Länderdaten werden nicht angezeigt

Question

Ich habe eine Karte mit D3 von topojson erstellt, aber im HTML werden die Länderdaten noch nicht angezeigt.

Hallo zusammen!

Ich habe mit d3 aus einer Topojson-Datei eine Karte von Europa erstellt. Das ist mein 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);

Die

topojson-Datei sieht so aus:

{"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]]},

...

-und funktioniert in allen Ländern-

Die Karte wird in meinem Browser angezeigt, enthält jedoch keine Datenattribute (Name, ID).

Wenn ich console.log(Länder) verwende, druckt die Konsole die Daten von topojson, wie Name, ID usw. Das ist von der Konsole:

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: {…}}

Haben Sie Ideen?

Answer 1

目前尚不清楚您希望在哪里看到每个功能的属性。在您共享的代码中，您从未使用过该数据。

如果您想要的只是一些标签，您可以按照此示例进行操作

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