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?
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