D3 v4力导向图无法使用img作为节点的问题求助

你遇到的核心问题是SVG中HTML元素（img）的定位逻辑和SVG原生图形（circle/rect）完全不同，加上缺少图片必要属性，导致图片节点无法正常显示。下面分点说明问题和修复方案：

主要问题点 #

1. 错误的定位方式：你用CSS的left/top来定位img，但SVG中的HTML元素应该用transform="translate()"来定位，SVG坐标系和CSS定位逻辑不兼容。
2. 缺少图片源（src）：创建img元素后没有设置src属性，浏览器没有可加载的图片内容。
3. 未设置图片尺寸：img默认没有尺寸，即使加载了图片也可能无法显示。
4. 边界限制参数不匹配：radius=5远小于图片尺寸，边界计算会导致图片超出SVG范围。

修复后的完整代码 #

HTML部分 #

<script src="https://d3js.org/d3.v4.min.js"></script>
<h1>Force Directed Graph of State Contiguity</h1>
<div class="fdd">
  <svg width="1000" height="500"></svg>
</div>

CSS部分 #

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}
h1{
  font-family: arial;
}
body{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction: column;
  background:#d64d4d;
}
.fdd{
  width:1000px;
  height:500px;
  background: white;
}
/* 可选：给img加个边框，方便调试 */
.flag {
  border: 1px solid #ddd;
  border-radius: 4px;
}

JavaScript部分 #

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    radius=16; // 修改为图片尺寸的一半（32/2）

var simulation = d3.forceSimulation()
  .force("link", d3.forceLink().id(function(d,index) { return d.id; }).distance(10))
  .force("charge", d3.forceManyBody().distanceMin(10).distanceMax(120))
  .force("center", d3.forceCenter(width / 2, height / 2));

d3.json("https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json",function(json ) {
  json.nodes.forEach(function(d,i){
    d.id = i;
  })

  var link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(json.links)
    .enter().append("line")
    .attr("stroke-width","1");

  var node = svg.append("g")
    .attr("class", "nodes f32")
    .selectAll("img")
    .data(json.nodes)
    .enter().append("img")
    .attr("class","flag ar")
    // 设置国旗图片地址，利用节点的code字段
    .attr("src", function(d) {
      return `https://flagcdn.com/w32/${d.code.toLowerCase()}.png`;
    })
    // 设置图片固定尺寸
    .attr("width", 32)
    .attr("height", 32)
    .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));

  function ticked() {
    link
      .attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });

    node
      .attr("transform", function(d) {
        // 限制节点在SVG范围内，用图片一半尺寸作为边界缓冲
        var x = Math.max(radius, Math.min(width - radius, d.x));
        var y = Math.max(radius, Math.min(height - radius, d.y));
        d.x = x;
        d.y = y;
        // 偏移图片一半尺寸，让图片中心对齐节点坐标
        return `translate(${x - radius}, ${y - radius})`;
      });
  }

  simulation
    .nodes(json.nodes)
    .on("tick", ticked);

  simulation.force("link")
    .links(json.links);
});

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

关键修改说明 #

• 图片源设置：利用原数据中的code字段拼接国旗CDN地址，确保每个节点加载对应国家的国旗。
• transform定位：使用SVG的translate变换来定位图片，同时偏移图片一半尺寸，让图片中心和力导向图的节点坐标对齐，避免视觉偏移。
• 边界参数调整：将radius改为图片尺寸的一半，保证图片不会超出SVG可视范围。
• 图片尺寸显式设置：固定img的宽高，确保图片加载后能正常显示。

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