如何在ZoomCharts中合并两节点间多链接为单链接且保留全部链接详情

问题场景 #

你现在遇到的情况是：在ZoomCharts的Network Chart中，两个节点（比如示例里的n1和n2）之间存在多条链接，但希望在可视化界面上只显示单个链接，同时需要能够获取到所有这些原始链接的详细信息（比如每个链接的id、样式属性等）。

解决方案思路 #

核心思路是先对原始链接数据做预处理，把同一对节点间的所有链接聚合为一个“虚拟合并链接”，并把所有原始链接的信息存在这个合并链接的自定义字段中；然后通过图表配置控制显示样式，同时添加交互逻辑来获取/展示所有原始链接的详情。

具体实现步骤 #

1. 预处理链接数据，聚合同一节点对的链接

先写一个数据处理函数，把原始的links数组按照from和to的组合分组（因为示例是有向链接，所以直接用from+'-'+to作为分组标识；如果是无向图，可以把from和to排序后再拼接）：

// 原始数据
var rawData = { 
  "nodes": [{ "id": "n1", "loaded": true, "style": { "label": "Node1" } }, { "id": "n2", "loaded": true, "style": { "label": "Node2" } }], 
  "links": [
    { "id": "l1", "from": "n1", "to": "n2", "style": { "fillColor": "red", "toDecoration": "arrow" } }, 
    { "id": "l11", "from": "n1", "to": "n2", "style": { "fillColor": "red", "toDecoration": "arrow" } }, 
    { "id": "l111", "from": "n1", "to": "n2", "style": { "fillColor": "red", "toDecoration": "arrow" } }, 
    { "id": "l114", "from": "n1", "to": "n2", "style": { "fillColor": "blue", "toDecoration": "arrow" } }
  ]
};

// 聚合链接的函数
function aggregateLinks(rawLinks) {
  const linkGroups = {};
  
  rawLinks.forEach(link => {
    // 生成分组key（有向图用from+to的组合）
    const groupKey = `${link.from}-${link.to}`;
    if (!linkGroups[groupKey]) {
      // 初始化分组，用第一个链接的基础属性，添加originalLinks字段存储所有原始链接
      linkGroups[groupKey] = {
        id: `agg-${groupKey}`, // 合并链接的唯一ID
        from: link.from,
        to: link.to,
        style: {...link.style}, // 可以自定义合并后链接的样式，比如调整颜色或粗细
        originalLinks: []
      };
    }
    // 将原始链接加入分组的originalLinks数组
    linkGroups[groupKey].originalLinks.push(link);
  });
  
  // 将分组转换为数组，作为处理后的链接数据
  return Object.values(linkGroups);
}

// 处理后的数据
var processedData = {
  nodes: rawData.nodes,
  links: aggregateLinks(rawData.links)
};

2. 配置ZoomCharts Network Chart，实现显示与交互

接下来配置图表，让合并后的链接正常显示，同时添加交互（比如点击链接时获取所有原始链接详情）：

var chart = new zc.NetworkChart({
  container: "chartContainer",
  data: {
    preloaded: processedData
  },
  events: {
    // 点击链接时触发，获取所有原始链接详情
    onClickLink: function(e) {
      const mergedLink = e.link;
      if (mergedLink.originalLinks) {
        // 这里可以根据需求处理原始链接数据，比如打印、弹窗展示等
        console.log("所有原始链接详情：", mergedLink.originalLinks);
        // 示例：弹出包含所有链接ID的提示
        alert(`该合并链接包含 ${mergedLink.originalLinks.length} 条原始链接，ID分别是：${mergedLink.originalLinks.map(l => l.id).join(', ')}`);
      }
    }
  },
  styles: {
    link: {
      // 可以给合并后的链接设置特殊样式，比如加粗，方便区分
      lineWidth: 2
    }
  }
});

3. 额外优化（可选）

• 如果需要在链接标签上显示链接数量，可以在合并链接的style.label中设置：

  linkGroups[groupKey].style.label = `${linkGroups[groupKey].originalLinks.length}条链接`;
  

• 如果是无向图，分组key需要忽略from和to的顺序，比如用[link.from, link.to].sort().join('-')作为key。

效果说明 #

• 图表界面上，n1和n2之间只会显示单个合并后的链接；
• 点击该链接时，就能通过originalLinks字段获取到所有原始链接的完整信息（包括id、style等）；
• 你可以根据业务需求，把原始链接的详情用弹窗、侧边栏等方式展示出来。

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