Create map with D3 but country data does not appear
I have created a map using D3 from topojson but in the html the country data is not showing yet.
Hello everyone!
I have generated a map of Europe using d3 from a topojson file. This is my 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);
topojson file is like this:
{"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]]},
...
-and available in all countries-
The map shows up in my browser but has no data attributes (name, id).
When I console.log(countries), the console prints the data from topojson, such as name, id, etc. This is from the console:
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: {…}}
Do you have any ideas?
