向d3-geomap添加标注的正确方法

<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/d3-geomap@0.4.2/d3-geomap.min.js"></script>

<div id="map-container"></div>

const container = d3.select("#map-container");
const map = d3.geomap()
  .geofile("path/to/geofile.json") // 替换为实际的地图数据文件路径
  .projection(d3.geoMercator) // 使用Mercator投影
  .scale(100) // 设置地图缩放比例
  .unitId("iso_a2"); // 使用ISO 2字母国家代码作为地图区域的唯一标识

const data = [
  { id: "CN", name: "China", value: 100 },
  { id: "US", name: "United States", value: 200 },
  // 添加更多标注数据...
];

map.container(container); // 设置地图容器
map.draw(); // 绘制地图

// 创建标注元素
const labels = container.selectAll(".label")
  .data(data, d => d.id)
  .enter()
  .append("text")
  .attr("class", "label")
  .attr("transform", d => `translate(${map.path.centroid(d)})`)
  .text(d => d.name);

labels.style("font-size", "12px")
  .style("fill", "black");