在React中为D3节点添加上方显示文本并解决文本尺寸、定位问题

现有代码核心问题定位 #

• 错误将文本元素嵌套进圆形（circle）图形元素内部，不符合SVG渲染规范，文本无法正常展示
• 圆形和文本拆分为两个独立的DOM组，位置更新逻辑不同步，导致文本固定在左上角
• 未为文本设置明确的字号，使用浏览器默认大尺寸导致显示溢出
• 文本未设置位置偏移，会与圆形节点完全重叠

可直接落地的修正代码 #

1. 重构节点初始化逻辑，为每个节点创建独立的包裹组，将圆形、文本都绑定在同一个组内

const nodes_data = data['nodes'];

let simulation = d3.forceSimulation(nodes_data)
  .force("charge_force", d3.forceManyBody())
  .force("center_force", d3.forceCenter(width / 2, height / 2));

// 替换原来单独创建circle的逻辑，为每个数据点创建统一的包裹组
let nodeGroup = svg.append("g")
  .attr("class", "nodes")
  .selectAll("g")
  .data(nodes_data)
  .enter()
  .append("g");

// 往每个组内添加圆形节点
nodeGroup.append("circle")
  .attr("r", 5)
  .attr("fill", "red");

// 往每个组内添加名称文本，一次性解决尺寸、定位问题
nodeGroup.append("text")
  .text(d => d.name)
  // 设置小字号，解决文本过大问题
  .attr("font-size", "10px")
  // 文本水平居中，对齐节点中心
  .attr("text-anchor", "middle")
  // 垂直向上偏移，让文本显示在节点上方，不与圆形重叠
  .attr("dy", "-0.3em");

2. 简化tick更新逻辑，因为组内所有元素都会跟随组的位移同步移动，不需要分别更新圆形、文本的坐标

simulation.on("tick", tickActions);

function tickActions() {
  // 仅需更新包裹组的位移，圆形和文本会同步跟随节点运动
  nodeGroup.attr("transform", d => `translate(${d.x}, ${d.y})`);
}

效果说明 #

• 文本尺寸可直接通过font-size属性调整，彻底解决默认尺寸过大的问题
• 文本通过居中对齐+垂直偏移，会始终显示在对应圆形节点的正上方，不会出现位置偏移
• 圆形和文本绑定在同一DOM组内，力导向图模拟运动过程中两者位置完全同步，不会出现固定在左上角的问题

注意：不要拆分创建圆形组、文本组的逻辑，否则需要为两组元素分别写位置更新代码，很容易出现运动不同步的问题。也不要把文本元素直接嵌套在circle标签内部，基础SVG图形元素不支持嵌套子元素，会导致文本渲染异常。

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