如何使用D3将多个多边形统一渲染到指定单张图像上

你之前的代码出现多边形分散在页面各处的核心原因是：SVG容器直接挂载到body下，且目标图像和多边形不在同一个SVG坐标系内渲染，两者位置没有绑定。按照以下逻辑修改即可实现所有多边形仅在指定图像上展示：

• 所有渲染内容（底图+全部多边形）放在同一个SVG容器内，共享同一套坐标体系，从根源避免位置错位
• SVG尺寸和目标图像原始尺寸完全一致，绘制顺序为先画底图、再叠多边形，保证多边形在图像上层可见
• SVG挂载到你指定的页面容器节点下，不要直接挂到body随意排布

可直接运行的修正代码 #

// 替换成你要放置图像+多边形的页面容器ID，比如<div id="img-box"></div>就填"#img-box"
const targetContainer = "#img-box";
// 替换成你的目标图像路径、对应宽高
const imgConfig = {
  src: "your-target-image.jpg",
  width: 1000,
  height: 667
};

// 初始化和图像尺寸匹配的SVG容器
const vis = d3.select(targetContainer)
  .append("svg")
  .attr("width", imgConfig.width)
  .attr("height", imgConfig.height)
  .style("display", "block"); // 消除svg默认行内块的缝隙偏移

// 第一步：在SVG最底层绘制目标底图
vis.append("image")
  .attr("href", imgConfig.src)
  .attr("width", imgConfig.width)
  .attr("height", imgConfig.height)
  .attr("x", 0)
  .attr("y", 0);

// 多边形数据：单个多边形为一组点坐标，多个多边形就追加多个点数组即可
const poly = [
  [{"x":x1, "y":y1},{"x":x2,"y":y2},{"x":x3,"y":y3},{"x":x4,"y":y4}]
  // 示例：追加第二个多边形：[{"x":100,"y":100},{"x":200,"y":100},{"x":150,"y":200}]
];

// 第二步：在底图上层绘制所有多边形
vis.selectAll("polygon")
  .data(poly)
  .enter()
  .append("polygon")
  .attr("points", function(d) { 
    return d.map(point => [point.x, point.y].join(",")).join(" ");
  })
  .attr("stroke", "red")
  .attr("stroke-width", 2)
  .attr("fill", "none");

避坑提示

• 不要用普通<img>标签单独放底图、再单独加SVG画多边形，两者分属不同渲染流必然会出现位置错位
• 多边形坐标如果是基于原图的像素坐标，不要给SVG、底图、多边形加额外的transform偏移或者viewBox缩放，保证所有元素坐标原点和图像左上角对齐即可
• 如果需要调整整个模块在页面的位置，只需要给外层的目标容器加CSS定位控制，不要单独移动SVG或内部元素

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