D3力导向图求助：链接文本位置偏移与曲线文本显示异常

数据老陈

2026-8-18

D3力导向图链接文本问题解决思路

问题1：长链接文本居中错位

核心问题：固定50%的startOffset仅基于路径长度中点，未考虑文本自身宽度，导致长文本视觉上不居中。
实现步骤：
- 力布局每次更新后，遍历所有链接文本：
  1. 获取对应路径的总长度：path.node().getTotalLength()
  2. 获取文本实际宽度：textElement.getBBox().width
  3. 计算正确偏移量：(路径总长度 - 文本宽度) / 2，将数值设为startOffset（而非百分比）
- 代码片段：
```
linkText.each(function(d) {
  const pathEl = d3.select(this.parentNode).select('path').node();
  const textWidth = this.getBBox().width;
  const pathLength = pathEl.getTotalLength();
  const correctOffset = (pathLength - textWidth) / 2;
  d3.select(this).attr('startOffset', correctOffset);
});
```

问题2：曲线链接文本在反向节点时显示异常

核心问题：目标节点X坐标小于源节点时，曲线方向反转，文本的对齐与偏移逻辑未同步调整，导致显示错位或翻转。

实现步骤：

遍历链接文本时，判断源节点与目标节点的X坐标关系：
1. 若d.target.x < d.source.x，将文本text-anchor设为end，偏移量调整为路径总长度 - (路径总长度 - 文本宽度)/2
2. 正常方向下，保持text-anchor为middle，使用问题1的偏移计算方式

代码片段：

linkText.each(function(d) {
  const pathEl = d3.select(this.parentNode).select('path').node();
  const textWidth = this.getBBox().width;
  const pathLength = pathEl.getTotalLength();
  let offset, anchor;

  if (d.target.x < d.source.x) {
    anchor = 'end';
    offset = pathLength - (pathLength - textWidth) / 2;
  } else {
    anchor = 'middle';
    offset = (pathLength - textWidth) / 2;
  }

  d3.select(this)
    .attr('text-anchor', anchor)
    .attr('startOffset', offset);
});