背景

大多数图数据在可视化时被展示成点-线图（Node-link Diagram）的形式。点-线图特别适用于如交通网络图一类的关系数据的展示，这种数据的节点通常带有地理位置信息，例如迁徙图、移民图、航线图等。
image.pngimage.png

（左）图 1. 法国航线图。（右）图 2. 美国航线图。

image.pngimage.png

（左）图 3. 世界网络 IXP 对等图。（右）图 4. 美国移民图。

问题

虽然点-线图提供了直观的可视化，但是当数据存在大量节点和边时，视觉混乱（Visual Clutter）很快成为严重的问题。点-线图中的视觉混乱通常是边缘拥塞的直接结果，而在如交通网络一类数据中，节点位置通常具有明确定义的含义，并不总是可以修改节点位置以减少视觉混乱，如图 1～4 四个例子。因此，学术界诸多研究者设计了各种通过优化边的方式减轻上述视觉混乱，其中边绑定（Edge Bundling）方法被广泛研究和应用。各种边绑定的方法总结在【链接】。

例如下面这一个复杂的美国航线数据集，节点代表美国城市，带有坐标和经纬度信息；一条边代表一条航线：

  1. {
  2.     "nodes": [{
  3.         "x": -922.24444,
  4.         "y": 347.29444,
  5.         "id": "0",
  6.         "lon": -92.224444,
  7.         "lat": 34.729444
  8.     }, {
  9.         "x": -922.24444,
  10.         "y": 347.29444,
  11.         "id": "1",
  12.         "lon": -92.224444,
  13.         "lat": 34.729444
  14.     },
  15.     ...
  16.     ],
  17.     "edges": [
  18.       {
  19.         "source": "0",
  20.         "target": "21",
  21.         "id": "e0"
  22.       }, {
  23.         "source": "2",
  24.         "target": "13",
  25.         "id": "e1"
  26.       },
  27.       ...
  28.     ]
  29. }

如果使用 G6 简单地将节点和边渲染出来，将会得到如下结果：
image.png

图 5. G6 渲染原始数据结果

我们发现简单地将该数据渲染后的结果航线纵横交错，穿梭在密集的城市当中，视觉上十分混乱，即难以看清细节，也不能发现航线的总体趋势。

期待效果

我们希望可以通过边绑定的方法降低图 5 的视觉混乱，从而清晰图的整体走势、结构，突出航线频繁的城市，它们可能是重要的交通枢纽，并展示更多的统计信息，以便观察者进行分析。借助 G6，我们可以实现如下效果。通过边绑定，边的交错混乱情况被降低，颜色映射航班的飞行方向（出发（橙红色）与降落（青色））。节点大小表示到达与离开该城市的航班总数量，每个节点使用了饼图展示达到（橙红色）和离开（青色）航班的比例。并增加 hover 的交互，使用 tooltip 展示每个城市的经纬度。
airline-bundling-tooltip.gif

期待效果图及 tooltip 效果。

实现步骤

统计必要信息

首先，我们使用简单的 JS 根据数据统计每个节点的总度数（degree，即出入该城市的航线总数）、出度（outDegree，即飞出该城市的航线数）、入度（inDegree，即飞入该城市成航线数），为后续映射到节点上做好准备。

  1. const nodes = data.nodes;
  2. const edges = data.edges;
  3. nodes.forEach(n => {
  4.   n.y = -n.y;
  5.   n.degree = 0;
  6.   n.inDegree = 0;
  7.   n.outDegree = 0;
  8. });
  9. // compute the degree of each node
  10. const nodeIdMap = new Map();
  11. nodes.forEach(node => {
  12.   nodeIdMap.set(node.id, node);
  13. });
  14. edges.forEach(e => {
  15.   const source = nodeIdMap.get(e.source);
  16.   const target = nodeIdMap.get(e.target);
  17.   source.outDegree++;
  18.   target.inDegree++;
  19.   source.degree++;
  20.   target.degree++;
  21. });
  22. let maxDegree = -9999, minDegree = 9999;
  23. nodes.forEach(n => {
  24.   if (maxDegree < n.degree) maxDegree = n.degree;
  25.   if (minDegree > n.degree) minDegree = n.degree;
  26. });
  27. const sizeRange = [1, 20];
  28. const degreeDataRange = [minDegree, maxDegree];
  29. // 将范围是 degreeDataRange 的 degree 属性映射到范围 sizeRange 上后，
  30. // 写入到 nodes 中元素的‘size’属性中
  31. scaleNodeProp(nodes, 'size', 'degree', degreeDataRange, sizeRange);

scaleNodeProp() 方法将指定的节点属性 refPropName 根据给定数值范围 outRange 归一化，映射到另一个属性 propName 上：

  1. /**
  2.  * 映射属性
  3.  * @param  {array} nodes          对象数组
  4.  * @param  {string} propName      写入的属性名称
  5.  * @param  {string} refPropName   被归一化的属性名称
  6.  * @param  {array} dataRange      被归一化的属性的值范围 [min, max]
  7.  * @param  {array} outRange       写入的属性的值范围 [min, max]
  8.  */
  9. function scaleNodeProp(nodes, propName, refPropName, dataRange, outRange) {
  10.   const outLength = outRange[1] - outRange[0];
  11.   const dataLength = dataRange[1] - dataRange[0];
  12.   nodes.forEach(n => {
  13.     n[propName] = (n[refPropName] - dataRange[0]) * outLength / dataLength + outRange[0];
  14.   });
  15. }

通过上面两段代码，我们已经将归一化的度数映射到节点大小 size 上。

实例化边绑定插件

G6 中提供的边绑定插件是基于 FEDB（Force-Directed Edge Bundling for Graph Visualization）一文的实现。可以通过调节参数调整边绑定的效果。

  1. const edgeBundling = new Bundling({
  2.     bundleThreshold: 0.6, // 绑定的容忍度。数值越低，被绑定在一起的边相似度越高，即被绑在一起的边更少。
  3.     K: 100 // 绑定的强度
  4.  });

自定义饼图节点

在第一步中，我们已经为节点大小 size 映射了每个节点的总度数。为了更详细展示每个城市飞出和飞入航班的比例，我们希望在每个节点上显示一个类似于饼图的效果。例如image.png ，桔红色扇形代表飞入该城市的航班比例，青色代表飞出该城市的航班比例。G6 原生的 circle 、rect 等节点形状不能满足这一需求，但 G6 提供了节点的扩展机制，通过下面的代码片段，可以在 G6 中注册一个自定义的节点：

  1. const lightBlue = 'rgb(119, 243, 252)';
  2. const lightOrange = 'rgb(230, 100, 64)';
  4. // 注册自定义名为 pie-node 的节点类型
  5. G6.registerNode('pie-node', {
  6.   drawShape: (cfg, group) => {
  7.     const radius = cfg.size / 2; // 节点半径
  8.     const inPercentage = cfg.inDegree / cfg.degree; // 入度占总度数的比例
  9.     const inAngle = inPercentage * Math.PI * 2; // 入度在饼图中的夹角大小
  10.     const outAngle = Math.PI * 2 - inAngle; // 出度在饼图中的夹角大小
  11.     const inArcEnd = [radius * Math.cos(inAngle), radius * Math.sin(inAngle)]; //入度饼图弧结束位置
  12.     let isInBigArc = 1, isOutBigArc = 0;
  13.     if (inAngle > Math.PI) {
  14.       isInBigArc = 0;
  15.       isOutBigArc = 1;
  16.     }
  17.     // 定义代表入度的扇形形状
  18.     const fanIn = group.addShape('path', {
  19.       attrs: {
  20.         path: [
  21.           [ 'M', radius, 0 ],
  22.           [ 'A', radius, radius, 0, isInBigArc, 0, inArcEnd[0], inArcEnd[1] ],
  23.           [ 'L', 0, 0 ],
  24.           [ 'B' ]
  25.         ],
  26.         lineWidth: 0,
  27.         fill: lightOrange
  28.       }
  29.     });
  30.     // 定义代表出度的扇形形状
  31.     const fanOut = group.addShape('path', {
  32.       attrs: {
  33.         path: [
  34.           [ 'M', inArcEnd[0], inArcEnd[1] ],
  35.           [ 'A', radius, radius, 0, isOutBigArc, 0, radius, 0 ],
  36.           [ 'L', 0, 0 ],
  37.           [ 'B' ]
  38.         ],
  39.         lineWidth: 0,
  40.         fill: lightBlue
  41.       }
  42.     });
  43.     // 返回 keyshape
  44.     return fanIn;
  45.   }
  46. },
  47. "single-shape"
  48. );

这样，我们就在 G6 中注册了一个名为 pie-node 的节点类型。

实例化图

在这一步中，我们在实例化图时，并为之指定边绑定插件、节点类型（刚才自定义的 pie-node）、节点样式、边样式（渐变色）。

  1.   const edgeBundling = new Bundling({
  2.     bundleThreshold: 0.6, // 绑定的容忍度。数值越低，被绑定在一起的边相似度越高，即被绑在一起的边更少。
  3.     K: 100 // 绑定的强度
  4.   });
  5.   const graph = new G6.Graph({
  6.    container: 'mountNode',
  7.    width: 1000,
  8.    height: 800,
  9.    plugins: [ edgeBundling ], // 加入插件
  10.    fitView: true,
  11.    defaultNode: {
  12.      size: 3,
  13.      color: 'steelblue',
  14.      fill: 'steelblue'
  15.    },
  16.    nodeStyle: {
  17.      default: {
  18.        lineWidth: 0,
  19.        fill: 'steelblue'
  20.      }
  21.    },
  22.    edgeStyle: {
  23.     default: {
  24.       lineWidth: 0.7,
  25.       strokeOpacity: 0.1, // 设置边透明度，在边聚集的部分透明度将会叠加，从而具备突出高密度区域的效果
  26.       stroke: 'l(0) 0:' + llightBlue16 + ' 1:' + llightOrange16
  27.     }
  28.   }
  29.  });

这里出发端的颜色为 llightBlue16，结束端的颜色为 llightOrange16：

  1. const llightBlue16 = '#C8FDFC';
  2. const llightOrange16 = '#FFAA86';

为了配合节点和边的颜色，这里将页面的 body 的颜色设置为黑色：

  1. <style>
  2.   body{
  3.     background: rgb(0, 0, 0);
  4.   }
  5. </style>

执行绑定和渲染

有了 graph 实例和 edgeBundling 实例后，我们执行下面代码进行绑定操作和图的数据读入及渲染：

  1. edgeBundling.bundling(data); // 执行插件的绑定操作
  2. graph.data(data);
  3. graph.render();

设置 tooltip 与交互操作

使用 tooltip，可以在鼠标 hover 到节点上时展示该节点的其他属性值。首先在 html 中设定 tooltip 的样式：

  1. <style>
  2.   .g6-tooltip {
  3.     border: 1px solid #e2e2e2;
  4.     border-radius: 4px;
  5.     font-size: 12px;
  6.     color: #545454;
  7.     background-color: rgba(255, 255, 255, 0.9);
  8.     padding: 10px 8px;
  9.     box-shadow: rgb(174, 174, 174) 0px 0px 10px;
  10.   }
  11. </style>

然后，在上一步实例化 graph 时，增加一个名为 modes 的配置项到参数中，如下写法启动了 drag-canvas 画图拖动操作、zoom-canvas 画布放缩操作，以及 tooltip，在 formatText 函数中指定了 tooltip 显示的文本内容：

  1.  modes: {
  2.    default: [ 'drag-canvas', 'zoom-canvas', {
  3.      type: 'tooltip',
  4.      formatText(model) {
  5.        const text = 'Longitude: ' + model.lon + '\n Latitude: ' + model.lat;
  6.        return text;
  7.      },
  8.      shouldUpdate: e => {
  9.        return true;
  10.      }
  11.    }]
  12.  }

这样，当鼠标移动到节点上时，带有经纬度信息的 tooltip 将会出现：
image.png

tooltip

同时，可以拖拽和放缩画布：airline-bundling-interact.gif

缩放和拖动画布。

分析

image.png

最终效果图。节点大小代表飞入及飞出该城市航线总数。节点饼图展示飞出与飞入航线比例统计信息（橙红色为飞入，青色为飞出）。边的渐变色代表航班的飞行方向。起始端：青色；结束端：橙红色。

最后，让我们一起分析如下的最终结果图给我们带来的信息：

  • 大节点主要集中在中偏东部，根据其经纬度，可以推测这些城市有：亚特兰大、纽约、芝加哥、休斯顿、堪萨斯等，这些城市都是美国重要的交通枢纽；
  • 美国东部的线桔红色居多，说明东部城市的飞入航班较多；
  • 相反，西部城市的飞出航班较多；
  • 整体飞行方向从东至西；
  • 东部的航线也较之于西部更加密集、频繁；
  • 西海岸由西雅图和波特兰飞往洛杉矶的航班较多。

上述发现很容易被解释：美国东部是美国的经济、政治集中区域。

完整代码

自此，该案例完成。下面为该案例的完整代码：

  1. <!DOCTYPE html></script>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <style>
  8.   body{
  9.     background: rgb(0, 0, 0);
  10.   }
  11.   .g6-tooltip {
  12.     border: 1px solid #e2e2e2;
  13.     border-radius: 4px;
  14.     font-size: 12px;
  15.     color: #545454;
  16.     background-color: rgba(255, 255, 255, 0.9);
  17.     padding: 10px 8px;
  18.     box-shadow: rgb(174, 174, 174) 0px 0px 10px;
  19.   }
  20. </style>
  21. <body>
  22.     <div id="mountNode"></div>
  23. <script src="../build/g6.js"></script>
  24. <script src="./assets/d3-4.13.0.min.js"></script>
  25. <script src="../build/bundling.js"></script>
  26. <script>
  27.   const lightBlue = 'rgb(119, 243, 252)';
  28.   const llightBlue16 = '#C8FDFC';
  29.   const lightOrange = 'rgb(230, 100, 64)';
  30.   const llightOrange16 = '#FFAA86';
  31.   d3.json("./assets/data/american-migration.json", function(data) {
  32.     const nodes = data.nodes;
  33.     const edges = data.edges;
  34.     nodes.forEach(n => {
  35.         n.y = -n.y;
  36.         n.degree = 0;
  37.         n.inDegree = 0;
  38.         n.outDegree = 0;
  39.     });
  40.     // compute the degree of each node
  41.     const nodeIdMap = new Map();
  42.     nodes.forEach(node => {
  43.       nodeIdMap.set(node.id, node);
  44.     });
  45.     edges.forEach(e => {
  46.       const source = nodeIdMap.get(e.source);
  47.       const target = nodeIdMap.get(e.target);
  48.       source.outDegree++;
  49.       target.inDegree++;
  50.       source.degree++;
  51.       target.degree++;
  52.     });
  53.     let maxDegree = -9999, minDegree = 9999;
  54.     nodes.forEach(n => {
  55.       if (maxDegree < n.degree) maxDegree = n.degree;
  56.       if (minDegree > n.degree) minDegree = n.degree;
  57.     });
  58.     const sizeRange = [1, 20];
  59.     const sizeDataRange = [minDegree, maxDegree];
  60.     scaleNodeProp(nodes, 'size', 'degree', sizeDataRange, sizeRange);
  62.     // customize the node
  63.     G6.registerNode('pie-node', {
  64.       drawShape: (cfg, group) => {
  65.         const radius = cfg.size / 2;
  66.         const inPercentage = cfg.inDegree / cfg.degree;
  67.         const inAngle = inPercentage * Math.PI * 2;
  68.         const outAngle = Math.PI * 2 - inAngle;
  69.         const inArcEnd = [radius * Math.cos(inAngle), radius * Math.sin(inAngle)];
  70.         let isInBigArc = 1, isOutBigArc = 0;
  71.         if (inAngle > Math.PI) {
  72.             isInBigArc = 0;
  73.             isOutBigArc = 1;
  74.         }
  75.         const fanIn = group.addShape('path', {
  76.           attrs: {
  77.             path: [
  78.                 [ 'M', radius, 0 ],
  79.                 [ 'A', radius, radius, 0, isInBigArc, 0, inArcEnd[0], inArcEnd[1] ],
  80.                 [ 'L', 0, 0 ],
  81.                 [ 'B' ]
  82.             ],
  83.             stroke: lightOrange,
  84.             lineWidth: 0,
  85.             fill: lightOrange
  86.             }
  87.         });
  89.         const fanOut = group.addShape('path', {
  90.           attrs: {
  91.             path: [
  92.                 [ 'M', inArcEnd[0], inArcEnd[1] ],
  93.                 [ 'A', radius, radius, 0, isOutBigArc, 0, radius, 0 ],
  94.                 [ 'L', 0, 0 ],
  95.                 [ 'B' ]
  96.             ],
  97.             stroke: lightBlue,
  98.             lineWidth: 0,
  99.             fill: lightBlue
  100.             }
  101.         });
  102.         return fanIn;
  103.       }
  104.     },
  105.         "single-shape"
  106.     );
  108.     const edgeBundling = new Bundling({
  109.       bundleThreshold: 0.6,
  110.       K: 100
  111.     });
  112.     const graph = new G6.Graph({
  113.       container: 'mountNode',
  114.       width: 1000,
  115.       height: 800,
  116.       plugins: [ edgeBundling ],
  117.       fitView: true,
  118.       defaultNode: {
  119.         shape: 'pie-node',
  120.         size: 3,
  121.         color: 'steelblue',
  122.         fill: 'steelblue'
  123.       },
  124.       nodeStyle: {
  125.         default: {
  126.           lineWidth: 0,
  127.           fill: 'steelblue'
  128.         }
  129.       },
  130.       edgeStyle: {
  131.         default: {
  132.           lineWidth: 0.7,
  133.           strokeOpacity: 0.1,
  134.           stroke: 'l(0) 0:' + llightOrange16 + ' 1:' + llightBlue16
  135.         }
  136.       },
  137.       modes: {
  138.         default: [ 'drag-canvas', 'zoom-canvas', {
  139.           type: 'tooltip',
  140.           formatText(model) {
  141.             const text = 'Longitude: ' + model.lon + '\n Latitude: ' + model.lat;
  142.             return text;
  143.           },
  144.           shouldUpdate: e => {
  145.             return true;
  146.           }
  147.         }]
  148.     },
  149.     });
  150.     edgeBundling.bundling(data);
  151.     graph.data(data);
  152.     graph.render();
  153.   });
  154.   function scaleNodeProp(nodes, propName, refPropName, dataRange, outRange) {
  155.     const outLength = outRange[1] - outRange[0];
  156.     const dataLength = dataRange[1] - dataRange[0];
  157.     nodes.forEach(n => {
  158.       n[propName] = (n[refPropName] - dataRange[0]) * outLength / dataLength + outRange[0];
  159.     });
  160.   }
  161. </script>
  162. </body>
  163. </html>