D3.js层级边捆绑：为重复源目标链接调整curveBundle

针对你遇到的重复子节点导致链接重叠的问题，核心思路是给每个重复的(source, target)链接分配独特的偏移量，在曲线计算时让它们的路径错开，同时保证起点和终点仍准确对应节点。下面是具体的实现步骤：

1. 预处理链接数据，标记重复索引 #

首先需要统计每个链接对的重复次数，并给每个重复实例分配一个索引，后续用来计算偏移：

// 统计每个(source, target)对的总重复次数
const linkCounts = {};
links.forEach(link => {
  const key = `${link.source.id}-${link.target.id}`;
  linkCounts[key] = (linkCounts[key] || 0) + 1;
});

// 给每个链接实例分配重复索引（从0开始）
const currentInstanceCounts = {};
links.forEach(link => {
  const key = `${link.source.id}-${link.target.id}`;
  currentInstanceCounts[key] = (currentInstanceCounts[key] || 0);
  link.duplicateIndex = currentInstanceCounts[key];
  currentInstanceCounts[key]++;
});

2. 自定义链接路径生成逻辑，添加偏移 #

原示例的curveBundle会为相同的节点对生成完全一致的路径，我们需要修改路径生成逻辑，给重复链接的中间控制点添加偏移。以径向布局为例：

// 保留原有的径向链接生成器
const baseLink = d3.linkRadial()
  .angle(d => d.x)
  .radius(d => d.y)
  .curve(d3.curveBundle.beta(0.85));

// 自定义带偏移的路径生成函数
const offsetAmount = 0.02; // 角度偏移量，可根据图表大小调整
const getOffsetLinkPath = (link) => {
  // 获取节点间的原始路径点数组
  const originalPoints = link.source.path(link.target);
  
  // 对中间路径点添加偏移（首尾节点保持原位，保证和节点对齐）
  const offsetPoints = originalPoints.map((point, idx) => {
    if (idx === 0 || idx === originalPoints.length - 1) return point;
    
    // 计算居中偏移：让重复链接向两侧散开，避免全部偏向一边
    const normalizedIndex = link.duplicateIndex - (linkCounts[`${link.source.id}-${link.target.id}`] - 1) / 2;
    return {
      x: point.x + normalizedIndex * offsetAmount,
      y: point.y
    };
  });
  
  // 用偏移后的点生成路径
  return baseLink(offsetPoints);
};

3. 绘制链接并优化视觉效果 #

绘制时使用自定义的路径生成函数，同时可以根据重复次数调整样式，提升可读性：

svg.selectAll(".link")
  .data(links)
  .enter().append("path")
  .attr("class", "link")
  .attr("d", getOffsetLinkPath)
  // 重复次数越多，线宽越细、透明度越低，避免视觉拥挤
  .style("stroke-width", d => 2 / linkCounts[`${d.source.id}-${d.target.id}`])
  .style("stroke-opacity", d => 0.8 / linkCounts[`${d.source.id}-${d.target.id}`])
  // 可选：用颜色区分不同的重复链接
  .style("stroke", d => d3.schemeCategory10[d.duplicateIndex % 10]);

关键细节说明 #

• 居中偏移：通过normalizedIndex让重复链接向两侧对称散开，不会全部挤向一边，视觉上更平衡
• 仅偏移中间点：首尾节点保持原位置，确保链接和节点的对应关系准确
• 动态样式调整：根据重复次数降低线宽和透明度，避免大量重复链接导致图表混乱

这样修改后，重复的(source, target)链接会形成相互错开的曲线，完全解决重叠问题，达到你想要的可视化效果。

内容的提问来源于stack exchange，提问作者Tom van Veen