如何为D3邻接矩阵可视化图添加节点标签（解决不显示问题）

核心问题定位 #

你当前代码绑定的<title>元素是SVG原生的悬停提示组件，只有鼠标悬浮到节点圆形上时，才会弹出系统默认的浮层提示，并非直接渲染在画布上的常驻可见节点标签；同时将元素直接嵌套在<circle>自闭合图形标签内的写法，本身也不符合SVG的渲染规则，会导致嵌套内容被直接忽略，最终看不到任何标签效果。

可直接落地的修正代码 #

需要把圆形节点、文字标签拆分为同层级的独立元素，放置在同一个节点分组下，保证渲染优先级和坐标对齐：

// 1. 创建节点渲染的外层分组
const nodeLayer = svg.append("g")
  .attr("class", "nodes");

// 2. 独立渲染圆形节点图形
const nodeCircle = nodeLayer.selectAll("circle")
  .data(graph.nodes)
  .enter()
  .append("circle")
  .attr("r", 6)
  .style("fill", "steelblue");

// 3. 独立渲染常驻可见的节点文字标签
nodeLayer.selectAll("text")
  .data(graph.nodes)
  .enter()
  .append("text")
  .text(d => d.id) // 直接读取节点绑定的a/b/c等标识
  .attr("x", 10) // 相对节点中心向右偏移，避免和圆形重叠
  .attr("y", 3)  // 垂直方向微调对齐节点中心
  .style("font-size", "12px")
  .style("pointer-events", "none"); // 避免标签挡住鼠标交互

// 若需要保留悬停的详细提示，可单独给圆形绑定，不要替代常驻标签
nodeCircle.append("title")
  .text(d => `节点ID：${d.id}`);

排查要点 #

• 确认graph.nodes数组中的每个节点对象，都正确携带了对应a、b、c、d等节点标识的id字段，空值会导致文字渲染失败。
• 检查图层渲染顺序：文字标签层要放在连线、圆形节点的上层，避免被其他图形遮挡。
• 不要将<text>元素直接append到<circle>节点上，SVG的圆形图形元素不支持嵌套子内容，这类写法会被浏览器直接忽略。

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