D3 tangled tree 北欧神话家谱连线优化咨询：序数色阶+直角连线

修改需求说明 #

• 为连线配置序数颜色比例尺，区分不同亲属关系
• 将现有d3.linkHorizontal生成的曲线连线调整为直角连线

具体实现修改 #

1. 序数颜色比例尺配置 #

在计算完bundles变量后新增比例尺定义，以亲属关系对应的bundle id作为输入维度，同一个父母组合的亲属关系会分配到相同颜色：

// 新增代码：定义序数颜色比例尺，可自定义range内的颜色数组
const relationColorScale = d3.scaleOrdinal()
  .domain(bundles.map(b => b.id))
  .range(d3.schemeCategory10);

替换连线、节点描边、文字的随机颜色生成逻辑，统一使用上述比例尺输出颜色，同组亲属关系视觉保持一致：

// 连线颜色赋值
.attr("stroke", d => relationColorScale(d.bundle.id))
// 节点、文字颜色同理关联同一个比例尺即可

2. 直角连线实现 #

无需使用d3.linkHorizontal，自定义直角路径生成逻辑，替换原连线的d属性赋值代码即可实现无弧度的直角转折效果：

// 替换原来的d3.linkHorizontal相关代码
.attr("d", d => {
  // 可自定义转折位置，修改midX计算规则即可
  const midX = d.xt + (d.xs - d.xt) * 0.5;
  return `M ${d.xs} ${d.ys} H ${midX} V ${d.yt} H ${d.xt}`;
})

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