如何用D3.js合并两个邻接矩阵并处理重复节点

刚好做过类似的邻接矩阵合并需求，给你梳理下清晰的解决步骤，用JavaScript配合D3.js的数据处理就能实现你要的效果：

1. 节点合并与去重处理 #

我们的目标是：重复ID的节点合并为一个，year设为3；仅在单个矩阵出现的节点保留原year。

实现方式很直观，用Map来缓存已处理的节点，遍历两个矩阵的nodes数组：

• 先把第一个矩阵的节点全部存入Map，键为节点id，值为节点对象
• 再遍历第二个矩阵的节点：如果id已在Map中，就把该节点的year改成3；如果不在，就加入Map
• 最后把Map的值转成数组，就是合并后的nodes列表

// 你的原始矩阵数据（注意id要加引号，不然会报错）
const matrix1 = { 
  "nodes":[{"id": "a", "year": 1 },{"id": "b", "year": 1 }, {"id": "c", "year": 1 }], 
  "links":[{"source": "a", "target": "b" }, {"source": "a", "target": "c" }] 
};
const matrix2 = { 
  "nodes":[{"id": "a", "year": 2 },{"id": "b", "year": 2 }, {"id": "d", "year": 2 }], 
  "links":[{"source": "a", "target": "b" }, {"source": "a", "target": "d" }] 
};

// 处理节点合并
const nodeCache = new Map();
// 先加载第一个矩阵的节点
matrix1.nodes.forEach(node => {
  nodeCache.set(node.id, {...node}); // 用展开运算符避免引用修改
});
// 处理第二个矩阵的节点，覆盖重复节点的year
matrix2.nodes.forEach(node => {
  if (nodeCache.has(node.id)) {
    nodeCache.get(node.id).year = 3;
  } else {
    nodeCache.set(node.id, {...node});
  }
});
const mergedNodes = Array.from(nodeCache.values());

2. 链接合并与去重处理 #

链接的需求是合并两个矩阵的链接，去掉重复的（比如示例里的a->b在两个矩阵都有，只保留一条）。

这里用Set来存储链接的唯一标识（比如"source-target"的字符串），遍历合并后的链接数组，只保留没在Set里出现过的链接：

// 处理链接去重
const linkKeySet = new Set();
const mergedLinks = [];
// 合并两个矩阵的链接数组
[...matrix1.links, ...matrix2.links].forEach(link => {
  const uniqueKey = `${link.source}-${link.target}`;
  if (!linkKeySet.has(uniqueKey)) {
    linkKeySet.add(uniqueKey);
    mergedLinks.push({...link});
  }
});

3. D3.js中为重复节点设置不同颜色 #

合并完数据后，在D3.js可视化时，可以通过scaleOrdinal创建颜色比例尺，根据节点的year值分配不同颜色：

// 创建颜色比例尺，自定义对应颜色
const colorScale = d3.scaleOrdinal()
  .domain([1, 2, 3])
  .range(["#636EFA", "#00CC96", "#FF7E79"]); // year3的颜色可以选更醒目的

// 绘制节点时应用颜色（假设你已经有svg容器和布局逻辑）
svg.selectAll(".node")
  .data(mergedNodes)
  .enter()
  .append("circle")
  .attr("r", 10)
  .attr("cx", d => d.x) // 这里x/y是你用D3布局计算出的坐标
  .attr("cy", d => d.y)
  .attr("fill", d => colorScale(d.year));

最后把节点和链接组合起来，就是你要的最终矩阵：

const finalMatrix = { nodes: mergedNodes, links: mergedLinks };

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