D3.js力导向图节点自定义图片/SVG显示问题求助

你遇到的问题核心是元素定位逻辑错误和DOM结构绑定不当，以下是具体修复方案：

问题根源拆解 #

1. 当前node变量指向<image>元素，但力导向图的位置更新需要作用于包含图片的<g>容器，而非图片本身。
2. <image>元素没有cx/cy属性，需用x/y定位，且要偏移宽高的一半才能让图片中心对齐节点坐标。
3. 新版D3（v5+）已弃用xlink:href，直接使用href属性即可。
4. 拖拽事件需要绑定到<g>容器上，才能带动图片一起移动。

修复后的代码示例 #

节点部分代码 #

// 创建存放节点的父g容器，再为每个节点创建独立的g容器
const nodeGroup = svg
  .append('g')
  .attr('stroke', '#fff')
  .attr('stroke-width', 1.5)
  .selectAll('g')
  .data(nodes)
  .join('g')

// 在每个节点g容器内添加图片元素
const node = nodeGroup.append("image")
  .attr("href", "https://github.com/favicon.ico")
  .attr("width", 16)
  .attr("height", 16)
  .attr("x", -8) // 偏移宽度一半，让图片中心对齐节点坐标
  .attr("y", -8) // 偏移高度一半

// 拖拽事件绑定到节点g容器上
nodeGroup.call(d3.drag()
  .on('start', dragStarted)
  .on('drag', dragged)
  .on('end', dragEnded))

修正后的ticked函数 #

const ticked = (): void => {
  link.attr("x1", (d: any) => d.source.x)
      .attr("y1", (d: any) => d.source.y)
      .attr("x2", (d: any) => d.target.x)
      .attr("y2", (d: any) => d.target.y);

  // 通过transform更新节点g容器的位置
  nodeGroup.attr("transform", (d: any) => `translate(${d.x}, ${d.y})`);
}

额外提示 #

• 如果要使用自定义SVG而非图片，逻辑完全一致：将<image>替换为<use>或直接嵌入SVG元素，仍通过g容器的transform属性定位。
• 确保图片资源允许跨域访问，否则会出现加载失败的情况（示例中的GitHub favicon支持跨域）。

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