如何在d3.js中创建元素间的公共区域可视化效果

你要实现的这种多元素公共连接区域效果不需要依赖d3-sankey，用D3基础能力搭配少量几何计算就能实现，具体方案如下：

• 方案1：基于CSS混合模式的快速实现
  这种方案实现成本最低，不需要手动计算复杂的几何交集：
  1. 单独创建一个位于所有节点下方的SVG图层，专门用来绘制连接区域
  2. 获取每个关联节点的边界坐标，用D3的平滑曲线生成器（推荐d3.curveBasis或d3.curveCatmullRom，和参考图的圆角过渡效果匹配度最高）绘制连接相邻节点的闭合路径
  3. 给所有连接路径设置半透明填充，加上mix-blend-mode: multiply属性，路径重叠的公共区域会自动呈现更深的高亮色，和参考效果完全一致
     核心实现代码参考：

  // 获取关联节点的边界信息
  const nodes = d3.selectAll(".relation-node").nodes();
  const nodeBounds = nodes.map(node => node.getBoundingClientRect());
  // 注意要把getBoundingClientRect获取的视口坐标转成SVG内部坐标系坐标，避免出现位置偏移
  
  // 生成平滑连接路径
  const pathGenerator = d3.line().curve(d3.curveBasis);
  const connectArea = d3.select("#connect-layer")
    .append("path")
    .attr("d", pathGenerator(/* 传入按顺序排列的路径点坐标 */))
    .attr("fill", "#4e79f7")
    .attr("opacity", 0.5)
    .style("mix-blend-mode", "multiply");
  

• 方案2：基于几何交集计算的精准实现
  如果需要兼容不支持CSS混合模式的环境，或者需要对公共区域做单独交互（比如点击公共区域触发事件），可以引入d3-polygon模块实现：
  1. 把每个节点的轮廓转换成多边形点集
  2. 调用d3.polygonIntersect方法逐次计算所有关联多边形的交集，得到的点集就是元素间的公共区域
  3. 分别绘制节点间的连接段、公共高亮区域，各部分样式可以独立控制，灵活度更高
• 实现避坑点：
  • 所有坐标计算必须统一到同一个SVG坐标系下，节点如果带transform偏移，要提前做坐标转换，否则路径会错位
  • 连接区域的图层顺序要放在节点下方，避免遮挡节点本身的内容和绑定的交互事件
  • 如果节点支持拖拽，只要在拖拽事件的回调里重新计算路径点、更新路径的d属性即可，常规数据量下没有性能问题

参考效果：

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