背景

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

(左)图 1. 法国航线图。(右)图 2. 美国航线图。

Edge Bundling - 图3Edge Bundling - 图4

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

问题

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

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

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

如果使用 G6 简单地将节点和边渲染出来,将会得到如下结果:
Edge Bundling - 图5

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

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

期待效果

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

期待效果图及 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,
  23. minDegree = 9999;
  24. nodes.forEach(n => {
  25. if (maxDegree < n.degree) maxDegree = n.degree;
  26. if (minDegree > n.degree) minDegree = n.degree;
  27. });
  28. const sizeRange = [1, 20];
  29. const degreeDataRange = [minDegree, maxDegree];
  30. // 将范围是 degreeDataRange 的 degree 属性映射到范围 sizeRange 上后,
  31. // 写入到 nodes 中元素的 ‘size’ 属性中
  32. 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 映射了每个节点的总度数。为了更详细展示每个城市飞出和飞入航班的比例,我们希望在每个节点上显示一个类似于饼图的效果。例如Edge Bundling - 图7 ,桔红色扇形代表飞入该城市的航班比例,青色代表飞出该城市的航班比例。G6 内置的 circle 、rect 等节点形状不能满足这一需求,但 G6 提供了节点的扩展机制,通过下面的代码片段,可以在 G6 中注册一个自定义的节点:

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

这样,我们就在 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 将会出现:
Edge Bundling - 图8

tooltip

同时,可以拖拽和放缩画布: Edge Bundling - 图9

缩放和拖动画布

分析

Edge Bundling - 图10

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

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

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

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