Buat peta dengan D3 tetapi data negara tidak muncul
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?
