使用D3加载TopoJSON绘制欧洲地图，国家数据属性未显示求助

我用D3.js基于TopoJSON文件生成了欧洲地图，代码如下：

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文件结构示例：

{"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]]},
...
}
}

目前地图能正常显示，控制台通过console.log(countries)也能看到包含id、name的完整数据，但这些属性没有出现在生成的<path>元素的HTML属性中。请问怎么解决？

D3.js的.data()方法仅会把数据绑定到DOM元素上，不会自动将数据字段转为HTML属性。要把id、name等数据呈现到HTML中，需要手动通过.attr()或.dataset()方法添加：

方法1：添加自定义数据属性（推荐） #

使用data-*属性符合HTML规范，方便后续通过DOM API或CSS选择器访问：

g.selectAll('path')
  .data(countries.features)
  .enter()
  .append('path')
  .attr('class', 'country')
  .attr('d', path)
  // 绑定id和name到自定义属性
  .attr('data-id', d => d.id)
  .attr('data-name', d => d.properties.NAME);

方法2：直接设置元素id（仅当id唯一时适用） #

如果国家id全局唯一，可以直接将其设为<path>的id属性：

.attr('id', d => d.id)
.attr('data-name', d => d.properties.NAME);

修改后生成的HTML示例 #

<path class="country" d="..." data-id="AZ" data-name="Azerbaijan"></path>
<path class="country" d="..." data-id="AL" data-name="Albania"></path>

这样就能在HTML中看到国家的id和name属性，同时不影响地图的渲染效果。

内容的提问来源于stack exchange，提问作者Coco