Create map with D3 but country data does not appear

Question

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?

Answer 1

It's not clear where you would expect to see the properties for each function. In the code you shared, you never used that data.

If all you want is some tags, you can follow this example

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