如何在d3中将地图作为交互式背景？

// 1. 获取地图数据
d3.json("map.json").then(function(mapData) {
  // 2. 加载地图数据
  var geojson = topojson.feature(mapData, mapData.objects.map);

  // 3. 创建地图投影
  var projection = d3.geoMercator()
    .fitSize([width, height], geojson);

  // 4. 绘制地图路径
  var path = d3.geoPath()
    .projection(projection);

  // 绘制地图
  svg.selectAll("path")
    .data(geojson.features)
    .enter()
    .append("path")
    .attr("d", path)
    .attr("fill", "lightgray")
    .attr("stroke", "white")
    .attr("stroke-width", 0.5);

  // 5. 添加交互效果
  svg.selectAll("path")
    .on("mouseover", function(d) {
      d3.select(this)
        .attr("fill", "orange");
    })
    .on("mouseout", function(d) {
      d3.select(this)
        .attr("fill", "lightgray");
    });
});