Buat peta dengan D3 tetapi data negara tidak muncul

Question

Saya telah mencipta peta menggunakan D3 daripada topojson tetapi dalam html data negara belum dipaparkan lagi.

Hello semua!

Saya telah menjana peta Eropah menggunakan d3 daripada fail topojson. Ini kod saya

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);

Fail

topojson kelihatan seperti ini:

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

...

-dan berfungsi di semua negara-

Peta muncul dalam penyemak imbas saya tetapi tidak mempunyai atribut data (nama, id).

Apabila saya console.log(countries), konsol mencetak data daripada topojson, seperti nama, id, dsb. Ini daripada konsol:

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

Adakah anda mempunyai sebarang idea?

Answer 1

Tidak jelas di mana anda menjangkakan untuk melihat sifat bagi setiap fungsi. Dalam kod yang anda kongsi, anda tidak pernah menggunakan data tersebut.

Jika anda hanya mahukan beberapa tag, anda boleh ikuti contoh ini

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