Buat peta dengan D3 tetapi data negara tidak muncul
P粉285587590
P粉285587590 2024-04-02 10:29:33
0
1
439

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?

P粉285587590
P粉285587590

membalas semua(1)
P粉242535777

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan