在D3中为path标签添加feature type属性及哥伦比亚地图代码咨询

嘿，这个需求实现起来超简单！你只需要在创建path元素的D3链式调用中，新增一个.attr()方法，用来绑定feature的type属性到path标签上就行。

核心思路 #

每个通过.data(features)绑定的元素，都能通过回调函数里的d参数访问到对应的GeoJSON Feature对象。你只需要把这个对象里的type字段（或者你业务里定义的feature类型字段）赋值给path的某个属性即可。

修改后的完整代码片段 #

d3.json('colombia.geo.json', function(error, mapData) {
  var features = mapData.features;
  // 根据数据更新颜色比例尺定义域
  color.domain([0, d3.max(features, nameLength)]);
  // 绘制每个省份为path元素
  mapLayer.selectAll('path')
    .data(features)
    .enter().append('path')
    .attr('d', path)
    .attr('vector-effect', 'non-scaling-stroke')
    // 👇 新增这一行来添加feature type属性
    .attr('data-feature-type', d => d.type)
    .style('fill', fillFn)
    .on('mouseover', mouseover)
    .on('mouseout', mouseout); // 补全你未写完的mouseout事件
});

细节说明 #

1. 属性命名规范：我用了data-feature-type这个自定义属性名，这是HTML5推荐的自定义属性写法（前缀data-），可以避免和原生HTML属性冲突。如果你的业务有特定命名需求，也可以改成你需要的名字，比如直接feature-type。
2. 字段来源：上面的代码用的是GeoJSON Feature对象自带的type字段（通常值为"Feature"）。如果你的feature类型是存在于properties里的自定义字段（比如d.properties.regionType），只需要把回调里的d.type换成对应的路径就行。
3. 回调写法：示例里用了箭头函数d => d.type，你也可以写成传统的函数形式：

   .attr('data-feature-type', function(d) {
     return d.type;
   })
   

两种写法效果完全一致，选你习惯的就行。

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