D3.js技术问题：如何合并饼图的两个SVG路径？

当然可以用D3.js实现这个需求，核心是处理两个路径的重叠线段，将它们合并为一个无内部分隔线的闭合路径。以下是两种可行的方案：

方案一：手动调整路径数据拼接 #

观察你提供的两段路径数据，两个扇区的分隔线是彼此重叠的线段。你可以手动修改路径字符串，去掉重复的重叠部分后拼接：

1. 移除d1末尾的闭合指令Z（因为后续要衔接d2的路径）
2. 移除d2开头的M指令以及对应的重叠线段（也就是两个扇区共享的那条边）
3. 将修改后的d1和d2拼接，最后加上Z完成闭合

示例代码：

const d1 = 'M103.30359619841397,165.17683164487954a55.8,55.8 0 1 0 53.69640380158603,-70.97683164487952l0,-37.2a93,93 0 1 1 -89.49400633597672,118.29471940813255'; // 去掉末尾的Z
const d2 = 'a55.8,55.8 0 0 0 -25.01836119487599,5.9229350991588205l-16.678907463250663,-33.25137660056079a93,93 0 0 1 41.69726865812665,-9.871558498598034'; // 去掉开头的M157,94.2
const mergedD = `${d1} ${d2}Z`;

// 在D3中使用合并后的路径
d3.select('svg')
  .append('path')
  .attr('d', mergedD)
  .attr('fill', 'none')
  .attr('stroke', 'black');

方案二：使用D3.Path构建合并路径 #

利用D3的d3.path() API，你可以程序化地构建合并后的路径，避免手动修改字符串的麻烦：

const path = d3.path();

// 解析并绘制d1的路径（跳过闭合指令）
const d1Commands = d3.pathParse(d1);
d1Commands.forEach(cmd => {
  if (cmd.type !== 'Z') {
    path[cmd.type](...cmd.values);
  }
});

// 解析并绘制d2的路径（跳过起始M指令）
const d2Commands = d3.pathParse(d2);
d2Commands.forEach((cmd, index) => {
  // 跳过第一个M指令（因为d1的路径已经衔接至该点）
  if (!(index === 0 && cmd.type === 'M')) {
    path[cmd.type](...cmd.values);
  }
});

// 闭合路径
path.closePath();

// 在D3中应用路径
d3.select('svg')
  .append('path')
  .attr('d', path.toString())
  .attr('fill', 'none')
  .attr('stroke', 'black');

注意：如果两段路径的衔接处存在细微坐标偏差，可能需要微调坐标确保平滑衔接。如果遇到复杂路径合并场景，也可以结合专门的SVG路径处理库辅助分析重叠线段。

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