D3地图开发：如何在JSON数据中关联SVG文件实现自定义位置标记？

方案1：直接使用<image>标签加载外部SVG（入门友好） #

这是最适合新手的实现方式，逻辑简单无需额外预处理，只要你的SVG图标文件命名和shape字段取值完全对应即可直接使用：

• 第一步：先通过D3的地图投影将数据中的经纬度转换为画布坐标
• 第二步：绑定数据后给每个数据点追加<image>元素，动态设置路径匹配对应SVG文件，同时设置坐标、尺寸、样式即可

// 前置条件：你已经完成地图投影projection、SVG画布svg的初始化
d3.json("你的UFO数据文件路径.json").then(data => {
  data.forEach(item => {
    // 经纬度转画布坐标，注意投影传参顺序是[经度, 纬度]不要写反
    const [x, y] = projection([item.longitude, item.latitude]);
    // 追加对应形状的图标
    svg.append("image")
      .attr("href", `icons/${item.shape}.svg`) // D3 v7及以上版本直接用href，低版本用xlink:href
      .attr("x", x - 12) // 减去图标宽度一半，让图标中心对准坐标点
      .attr("y", y - 12) // 减去图标高度一半
      .attr("width", 24)
      .attr("height", 24)
      .style("filter", `drop-shadow(0 0 4px ${item.color})`); // 用数据里的color字段加发光标识
  })
})

注意：如果需要修改外部SVG的填充颜色，只要把SVG文件内部的fill属性改为currentColor，之后直接给<image>元素设置color属性即可生效，无需逐个修改图标文件。

方案2：预加载SVG为符号（性能更优） #

如果你的数据量较大、图标种类多，推荐用该方案避免重复请求SVG文件，加载和渲染速度更快：

• 第一步：先把所有用到的SVG图标预先加载并存为SVG符号定义
• 第二步：渲染数据点时直接用<use>标签复用对应符号，无需重复加载资源

// 先列出所有你用到的UFO形状，和SVG文件名保持完全一致
const shapeList = ["Triangle", "Circle", "Oval", "Cigar", "Light" /* 补全你所有的形状 */];
const defs = svg.append("defs");

// 预加载所有图标到符号定义中
Promise.all(shapeList.map(shape => 
  d3.text(`icons/${shape}.svg`).then(svgContent => {
    defs.append("g")
      .attr("id", `ufo-${shape}`)
      .html(svgContent)
      .select("svg")
      .attr("width", 24)
      .attr("height", 24);
  })
)).then(() => {
  // 所有图标加载完成后再渲染数据点
  d3.json("你的UFO数据文件路径.json").then(data => {
    data.forEach(item => {
      const [x, y] = projection([item.longitude, item.latitude]);
      svg.append("use")
        .attr("href", `#ufo-${item.shape}`)
        .attr("x", x - 12)
        .attr("y", y - 12)
        .style("fill", item.color); // 可直接修改图标填充色，灵活度更高
    })
  })
})

常见调试提示 #

• 图标显示位置偏移时，调整x和y的偏移值即可，保证图标中心和坐标点对齐
• 如果坐标完全错位，优先检查投影传参是不是写反了经纬度顺序
• 若图标不显示，检查文件名大小写和shape字段取值是否完全匹配，路径是否正确

内容的提问来源于stack exchange，提问作者Gideon S Crawley