{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-ast-1efb3ed12d623110b841517107a9d245-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":2,"children":[{"type":"link","url":"#背景","title":null,"children":[],"data":{"hProperties":{"aria-label":"背景 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"背景","position":{"start":{"line":3,"column":4,"offset":5},"end":{"line":3,"column":6,"offset":7},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":2},"end":{"line":3,"column":6,"offset":7},"indent":[]},"data":{"id":"背景","htmlAttributes":{"id":"背景"},"hProperties":{"id":"背景"}}},{"type":"paragraph","children":[{"type":"text","value":"大多数图数据在可视化时被展示成点-线图（Node-link Diagram）的形式。点-线图特别适用于如交通网络图一类的关系数据的展示，这种数据的节点通常带有地理位置信息，例如迁徙图、移民图、航线图等。","position":{"start":{"line":4,"column":1,"offset":8},"end":{"line":4,"column":102,"offset":109},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":4,"column":102,"offset":109},"end":{"line":4,"column":108,"offset":115},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1564995648650-020a5d61-c8d9-4ab2-a325-1d1f95c82f94.png#align=left&display=inline&height=200&name=image.png&originHeight=1182&originWidth=1426&search=&size=1819531&status=done&width=241","alt":"image.png","position":{"start":{"line":4,"column":108,"offset":115},"end":{"line":4,"column":352,"offset":359},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1564995648684-9731bc35-1a1d-44cd-9d9c-633199c542c6.png#align=left&display=inline&height=197&name=image.png&originHeight=1086&originWidth=2426&search=&size=2823231&status=done&width=439","alt":"image.png","position":{"start":{"line":4,"column":352,"offset":359},"end":{"line":4,"column":596,"offset":603},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":8},"end":{"line":4,"column":596,"offset":603},"indent":[]}},{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"（左）图 1. 法国航线图。（右）图 2. 美国航线图。","position":{"start":{"line":5,"column":3,"offset":606},"end":{"line":5,"column":31,"offset":634},"indent":[]}}],"position":{"start":{"line":5,"column":3,"offset":606},"end":{"line":5,"column":31,"offset":634},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":604},"end":{"line":5,"column":31,"offset":634},"indent":[]}},{"type":"paragraph","children":[{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1564995648704-c470528e-a2ba-4749-8521-cd4754bd5875.png#align=left&display=inline&height=134&name=image.png&originHeight=754&originWidth=2282&search=&size=2012559&status=done&width=406","alt":"image.png","position":{"start":{"line":8,"column":1,"offset":637},"end":{"line":8,"column":244,"offset":880},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1564995648656-b2fc8176-6bb4-459e-b10d-e04946e3734c.png#align=left&display=inline&height=141&name=image.png&originHeight=1030&originWidth=2266&search=&size=1570587&status=done&width=311","alt":"image.png","position":{"start":{"line":8,"column":244,"offset":880},"end":{"line":8,"column":488,"offset":1124},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":637},"end":{"line":8,"column":488,"offset":1124},"indent":[]}},{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"（左）图 3. 世界网络 IXP 对等图。（右）图 4. 美国移民图。","position":{"start":{"line":9,"column":3,"offset":1127},"end":{"line":9,"column":38,"offset":1162},"indent":[]}}],"position":{"start":{"line":9,"column":3,"offset":1127},"end":{"line":9,"column":38,"offset":1162},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":1125},"end":{"line":9,"column":38,"offset":1162},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#问题","title":null,"children":[],"data":{"hProperties":{"aria-label":"问题 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"问题","position":{"start":{"line":11,"column":4,"offset":1167},"end":{"line":11,"column":6,"offset":1169},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":1164},"end":{"line":11,"column":6,"offset":1169},"indent":[]},"data":{"id":"问题","htmlAttributes":{"id":"问题"},"hProperties":{"id":"问题"}}},{"type":"paragraph","children":[{"type":"text","value":"虽然点-线图提供了直观的可视化，但是当数据存在大量节点和边时，视觉混乱（Visual Clutter）很快成为严重的问题。点-线图中的视觉混乱通常是边缘拥塞的直接结果，而在如交通网络一类数据中，节点位置通常具有明确定义的含义，并不总是可以修改节点位置以减少视觉混乱，如图 1～4 四个例子。因此，学术界诸多研究者设计了各种通过优化边的方式减轻上述视觉混乱，其中边绑定（Edge Bundling）方法被广泛研究和应用。各种边绑定的方法总结在【","position":{"start":{"line":12,"column":1,"offset":1170},"end":{"line":12,"column":222,"offset":1391},"indent":[]}},{"type":"link","title":null,"url":"https://yuque.antfin-inc.com/shiwu.wyy/go1ec6/znmtuw","children":[{"type":"text","value":"链接","position":{"start":{"line":12,"column":223,"offset":1392},"end":{"line":12,"column":225,"offset":1394},"indent":[]}}],"position":{"start":{"line":12,"column":222,"offset":1391},"end":{"line":12,"column":280,"offset":1449},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"】。","position":{"start":{"line":12,"column":280,"offset":1449},"end":{"line":12,"column":282,"offset":1451},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":1170},"end":{"line":12,"column":282,"offset":1451},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"例如下面这一个复杂的美国航线数据集，节点代表美国城市，带有坐标和经纬度信息；一条边代表一条航线：","position":{"start":{"line":14,"column":1,"offset":1453},"end":{"line":14,"column":49,"offset":1501},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":1453},"end":{"line":14,"column":49,"offset":1501},"indent":[]}},{"type":"html","lang":"json","meta":null,"value":"
{\n    \"nodes\": [{\n        \"x\": -922.24444,\n        \"y\": 347.29444,\n        \"id\": \"0\",\n        \"lon\": -92.224444,\n        \"lat\": 34.729444\n    }, {\n        \"x\": -922.24444,\n        \"y\": 347.29444,\n        \"id\": \"1\",\n        \"lon\": -92.224444,\n        \"lat\": 34.729444\n    },\n    ...\n    ],\n    \"edges\": [\n      {\n        \"source\": \"0\",\n        \"target\": \"21\",\n        \"id\": \"e0\"\n      }, {\n        \"source\": \"2\",\n        \"target\": \"13\",\n        \"id\": \"e1\"\n      },\n      ...\n    ]\n}
","position":{"start":{"line":15,"column":1,"offset":1502},"end":{"line":45,"column":4,"offset":1995},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"如果使用 G6 简单地将节点和边渲染出来，将会得到如下结果：","position":{"start":{"line":47,"column":1,"offset":1997},"end":{"line":47,"column":31,"offset":2027},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":47,"column":31,"offset":2027},"end":{"line":47,"column":37,"offset":2033},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1564995648654-2890e390-4f54-4e64-a371-99eede5e739c.png#align=left&display=inline&height=512&name=image.png&originHeight=922&originWidth=1994&search=&size=1416365&status=done&width=1107.777807123868","alt":"image.png","position":{"start":{"line":47,"column":37,"offset":2033},"end":{"line":47,"column":294,"offset":2290},"indent":[]}}],"position":{"start":{"line":47,"column":1,"offset":1997},"end":{"line":47,"column":294,"offset":2290},"indent":[]}},{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"图 5. G6 渲染原始数据结果","position":{"start":{"line":48,"column":3,"offset":2293},"end":{"line":48,"column":19,"offset":2309},"indent":[]}}],"position":{"start":{"line":48,"column":3,"offset":2293},"end":{"line":48,"column":19,"offset":2309},"indent":[]}}],"position":{"start":{"line":48,"column":1,"offset":2291},"end":{"line":48,"column":19,"offset":2309},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"我们发现简单地将该数据渲染后的结果航线纵横交错，穿梭在密集的城市当中，视觉上十分混乱，即难以看清细节，也不能发现航线的总体趋势。","position":{"start":{"line":51,"column":1,"offset":2312},"end":{"line":51,"column":65,"offset":2376},"indent":[]}}],"position":{"start":{"line":51,"column":1,"offset":2312},"end":{"line":51,"column":65,"offset":2376},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#期待效果","title":null,"children":[],"data":{"hProperties":{"aria-label":"期待效果 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"期待效果","position":{"start":{"line":54,"column":4,"offset":2382},"end":{"line":54,"column":8,"offset":2386},"indent":[]}}],"position":{"start":{"line":54,"column":1,"offset":2379},"end":{"line":54,"column":8,"offset":2386},"indent":[]},"data":{"id":"期待效果","htmlAttributes":{"id":"期待效果"},"hProperties":{"id":"期待效果"}}},{"type":"paragraph","children":[{"type":"text","value":"我们希望可以通过边绑定的方法降低图 5 的视觉混乱，从而清晰图的整体走势、结构，突出航线频繁的城市，它们可能是重要的交通枢纽，并展示更多的统计信息，以便观察者进行分析。借助 G6，我们可以实现如下效果。通过边绑定，边的交错混乱情况被降低，颜色映射航班的飞行方向（出发（橙红色）与降落（青色））。节点大小表示到达与离开该城市的航班总数量，每个节点使用了饼图展示达到（橙红色）和离开（青色）航班的比例。并增加 hover 的交互，使用 tooltip 展示每个城市的经纬度。","position":{"start":{"line":55,"column":1,"offset":2387},"end":{"line":55,"column":236,"offset":2622},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":55,"column":236,"offset":2622},"end":{"line":55,"column":242,"offset":2628},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/gif/156681/1564995648666-448000ab-e568-4859-96b8-d191685c79fa.gif#align=left&display=inline&height=451&name=airline-bundling-tooltip.gif&originHeight=451&originWidth=1002&search=&size=479148&status=done&width=1002","alt":"airline-bundling-tooltip.gif","position":{"start":{"line":55,"column":242,"offset":2628},"end":{"line":55,"column":523,"offset":2909},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":2387},"end":{"line":55,"column":523,"offset":2909},"indent":[]}},{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"期待效果图及 tooltip 效果。","position":{"start":{"line":56,"column":3,"offset":2912},"end":{"line":56,"column":21,"offset":2930},"indent":[]}}],"position":{"start":{"line":56,"column":3,"offset":2912},"end":{"line":56,"column":21,"offset":2930},"indent":[]}}],"position":{"start":{"line":56,"column":1,"offset":2910},"end":{"line":56,"column":21,"offset":2930},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#实现步骤","title":null,"children":[],"data":{"hProperties":{"aria-label":"实现步骤 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"实现步骤","position":{"start":{"line":60,"column":4,"offset":2937},"end":{"line":60,"column":8,"offset":2941},"indent":[]}}],"position":{"start":{"line":60,"column":1,"offset":2934},"end":{"line":60,"column":8,"offset":2941},"indent":[]},"data":{"id":"实现步骤","htmlAttributes":{"id":"实现步骤"},"hProperties":{"id":"实现步骤"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#统计必要信息","title":null,"children":[],"data":{"hProperties":{"aria-label":"统计必要信息 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"统计必要信息","position":{"start":{"line":62,"column":5,"offset":2947},"end":{"line":62,"column":11,"offset":2953},"indent":[]}}],"position":{"start":{"line":62,"column":1,"offset":2943},"end":{"line":62,"column":11,"offset":2953},"indent":[]},"data":{"id":"统计必要信息","htmlAttributes":{"id":"统计必要信息"},"hProperties":{"id":"统计必要信息"}}},{"type":"paragraph","children":[{"type":"text","value":"首先，我们使用简单的 JS 根据数据统计每个节点的总度数（degree，即出入该城市的航线总数）、出度（outDegree，即飞出该城市的航线数）、入度（inDegree，即飞入该城市成航线数），为后续映射到节点上做好准备。","position":{"start":{"line":63,"column":1,"offset":2954},"end":{"line":63,"column":113,"offset":3066},"indent":[]}}],"position":{"start":{"line":63,"column":1,"offset":2954},"end":{"line":63,"column":113,"offset":3066},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
const nodes = data.nodes;\nconst edges = data.edges;\nnodes.forEach(n => {\n  n.y = -n.y;\n  n.degree = 0;\n  n.inDegree = 0;\n  n.outDegree = 0;\n});\n// compute the degree of each node\nconst nodeIdMap = new Map();\nnodes.forEach(node => {\n  nodeIdMap.set(node.id, node);\n});\nedges.forEach(e => {\n  const source = nodeIdMap.get(e.source);\n  const target = nodeIdMap.get(e.target);\n  source.outDegree++;\n  target.inDegree++;\n  source.degree++;\n  target.degree++;\n});\nlet maxDegree = -9999,\n  minDegree = 9999;\nnodes.forEach(n => {\n  if (maxDegree < n.degree) maxDegree = n.degree;\n  if (minDegree > n.degree) minDegree = n.degree;\n});\nconst sizeRange = [1, 20];\nconst degreeDataRange = [minDegree, maxDegree];\n// 将范围是 degreeDataRange 的 degree 属性映射到范围 sizeRange 上后，\n// 写入到 nodes 中元素的‘size’属性中\nscaleNodeProp(nodes, 'size', 'degree', degreeDataRange, sizeRange);\n
","position":{"start":{"line":64,"column":1,"offset":3067},"end":{"line":96,"column":4,"offset":3933},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"html","value":"scaleNodeProp()","position":{"start":{"line":98,"column":1,"offset":3935},"end":{"line":98,"column":18,"offset":3952},"indent":[]}},{"type":"text","value":" 方法将指定的节点属性 ","position":{"start":{"line":98,"column":18,"offset":3952},"end":{"line":98,"column":30,"offset":3964},"indent":[]}},{"type":"html","value":"refPropName","position":{"start":{"line":98,"column":30,"offset":3964},"end":{"line":98,"column":43,"offset":3977},"indent":[]}},{"type":"text","value":" 根据给定数值范围 ","position":{"start":{"line":98,"column":43,"offset":3977},"end":{"line":98,"column":53,"offset":3987},"indent":[]}},{"type":"html","value":"outRange","position":{"start":{"line":98,"column":53,"offset":3987},"end":{"line":98,"column":63,"offset":3997},"indent":[]}},{"type":"text","value":" 归一化，映射到另一个属性 ","position":{"start":{"line":98,"column":63,"offset":3997},"end":{"line":98,"column":77,"offset":4011},"indent":[]}},{"type":"html","value":"propName","position":{"start":{"line":98,"column":77,"offset":4011},"end":{"line":98,"column":87,"offset":4021},"indent":[]}},{"type":"text","value":" 上：","position":{"start":{"line":98,"column":87,"offset":4021},"end":{"line":98,"column":90,"offset":4024},"indent":[]}}],"position":{"start":{"line":98,"column":1,"offset":3935},"end":{"line":98,"column":90,"offset":4024},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
/**\n * 映射属性\n * @param  {array} nodes          对象数组\n * @param  {string} propName      写入的属性名称\n * @param  {string} refPropName   被归一化的属性名称\n * @param  {array} dataRange      被归一化的属性的值范围 [min, max]\n * @param  {array} outRange       写入的属性的值范围 [min, max]\n */\nfunction scaleNodeProp(nodes, propName, refPropName, dataRange, outRange) {\n  const outLength = outRange[1] - outRange[0];\n  const dataLength = dataRange[1] - dataRange[0];\n  nodes.forEach(n => {\n    n[propName] =\n      ((n[refPropName] - dataRange[0]) * outLength) / dataLength + outRange[0];\n  });\n}\n
","position":{"start":{"line":99,"column":1,"offset":4025},"end":{"line":115,"column":4,"offset":4589},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"通过上面两段代码，我们已经将归一化的度数映射到节点大小 ","position":{"start":{"line":117,"column":1,"offset":4591},"end":{"line":117,"column":29,"offset":4619},"indent":[]}},{"type":"html","value":"size","position":{"start":{"line":117,"column":29,"offset":4619},"end":{"line":117,"column":35,"offset":4625},"indent":[]}},{"type":"text","value":" 上。","position":{"start":{"line":117,"column":35,"offset":4625},"end":{"line":117,"column":38,"offset":4628},"indent":[]}}],"position":{"start":{"line":117,"column":1,"offset":4591},"end":{"line":117,"column":38,"offset":4628},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#实例化边绑定插件","title":null,"children":[],"data":{"hProperties":{"aria-label":"实例化边绑定插件 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"实例化边绑定插件","position":{"start":{"line":120,"column":5,"offset":4635},"end":{"line":120,"column":13,"offset":4643},"indent":[]}}],"position":{"start":{"line":120,"column":1,"offset":4631},"end":{"line":120,"column":13,"offset":4643},"indent":[]},"data":{"id":"实例化边绑定插件","htmlAttributes":{"id":"实例化边绑定插件"},"hProperties":{"id":"实例化边绑定插件"}}},{"type":"paragraph","children":[{"type":"text","value":"G6 中提供的边绑定插件是基于 FEDB（","position":{"start":{"line":121,"column":1,"offset":4644},"end":{"line":121,"column":22,"offset":4665},"indent":[]}},{"type":"link","title":null,"url":"http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.212.7989&rep=rep1&type=pdf","children":[{"type":"text","value":"Force-Directed Edge Bundling for Graph Visualization","position":{"start":{"line":121,"column":23,"offset":4666},"end":{"line":121,"column":75,"offset":4718},"indent":[]}}],"position":{"start":{"line":121,"column":22,"offset":4665},"end":{"line":121,"column":161,"offset":4804},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"）一文的实现。可以通过调节参数调整边绑定的效果。","position":{"start":{"line":121,"column":161,"offset":4804},"end":{"line":121,"column":185,"offset":4828},"indent":[]}}],"position":{"start":{"line":121,"column":1,"offset":4644},"end":{"line":121,"column":185,"offset":4828},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
const edgeBundling = new Bundling({\n  bundleThreshold: 0.6, // 绑定的容忍度。数值越低，被绑定在一起的边相似度越高，即被绑在一起的边更少。\n  K: 100, // 绑定的强度\n});\n
","position":{"start":{"line":122,"column":1,"offset":4829},"end":{"line":127,"column":4,"offset":4974},"indent":[1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#自定义饼图节点","title":null,"children":[],"data":{"hProperties":{"aria-label":"自定义饼图节点 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"自定义饼图节点","position":{"start":{"line":130,"column":5,"offset":4981},"end":{"line":130,"column":12,"offset":4988},"indent":[]}}],"position":{"start":{"line":130,"column":1,"offset":4977},"end":{"line":130,"column":12,"offset":4988},"indent":[]},"data":{"id":"自定义饼图节点","htmlAttributes":{"id":"自定义饼图节点"},"hProperties":{"id":"自定义饼图节点"}}},{"type":"paragraph","children":[{"type":"text","value":"在第一步中，我们已经为节点大小 size 映射了每个节点的总度数。为了更详细展示每个城市飞出和飞入航班的比例，我们希望在每个节点上显示一个类似于饼图的效果。例如","position":{"start":{"line":131,"column":1,"offset":4989},"end":{"line":131,"column":81,"offset":5069},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1564995648747-ae1d21c9-64ed-494b-8835-c5b096fba7e2.png#align=left&display=inline&height=45&name=image.png&originHeight=148&originWidth=158&search=&size=17728&status=done&width=48","alt":"image.png","position":{"start":{"line":131,"column":81,"offset":5069},"end":{"line":131,"column":319,"offset":5307},"indent":[]}},{"type":"text","value":" ，桔红色扇形代表飞入该城市的航班比例，青色代表飞出该城市的航班比例。G6 原生的 circle 、rect 等节点形状不能满足这一需求，但 G6 提供了节点的扩展机制，通过下面的代码片段，可以在 G6 中注册一个自定义的节点：","position":{"start":{"line":131,"column":319,"offset":5307},"end":{"line":131,"column":433,"offset":5421},"indent":[]}}],"position":{"start":{"line":131,"column":1,"offset":4989},"end":{"line":131,"column":433,"offset":5421},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
const lightBlue = 'rgb(119, 243, 252)';\nconst lightOrange = 'rgb(230, 100, 64)';\n\n// 注册自定义名为 pie-node 的节点类型\nG6.registerNode(\n  'pie-node',\n  {\n    drawShape: (cfg, group) => {\n      const radius = cfg.size / 2; // 节点半径\n      const inPercentage = cfg.inDegree / cfg.degree; // 入度占总度数的比例\n      const inAngle = inPercentage * Math.PI * 2; // 入度在饼图中的夹角大小\n      const outAngle = Math.PI * 2 - inAngle; // 出度在饼图中的夹角大小\n      const inArcEnd = [radius * Math.cos(inAngle), radius * Math.sin(inAngle)]; //入度饼图弧结束位置\n      let isInBigArc = 1,\n        isOutBigArc = 0;\n      if (inAngle > Math.PI) {\n        isInBigArc = 0;\n        isOutBigArc = 1;\n      }\n      // 定义代表入度的扇形形状\n      const fanIn = group.addShape('path', {\n        attrs: {\n          path: [\n            ['M', radius, 0],\n            ['A', radius, radius, 0, isInBigArc, 0, inArcEnd[0], inArcEnd[1]],\n            ['L', 0, 0],\n            ['B'],\n          ],\n          lineWidth: 0,\n          fill: lightOrange,\n        },\n      });\n      // 定义代表出度的扇形形状\n      const fanOut = group.addShape('path', {\n        attrs: {\n          path: [\n            ['M', inArcEnd[0], inArcEnd[1]],\n            ['A', radius, radius, 0, isOutBigArc, 0, radius, 0],\n            ['L', 0, 0],\n            ['B'],\n          ],\n          lineWidth: 0,\n          fill: lightBlue,\n        },\n      });\n      // 返回 keyshape\n      return fanIn;\n    },\n  },\n  'single-shape',\n);\n
","position":{"start":{"line":132,"column":1,"offset":5422},"end":{"line":181,"column":4,"offset":6750},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"这样，我们就在 G6 中注册了一个名为 pie-node 的节点类型。","position":{"start":{"line":182,"column":1,"offset":6751},"end":{"line":182,"column":36,"offset":6786},"indent":[]}}],"position":{"start":{"line":182,"column":1,"offset":6751},"end":{"line":182,"column":36,"offset":6786},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#实例化图","title":null,"children":[],"data":{"hProperties":{"aria-label":"实例化图 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"实例化图","position":{"start":{"line":185,"column":5,"offset":6793},"end":{"line":185,"column":9,"offset":6797},"indent":[]}}],"position":{"start":{"line":185,"column":1,"offset":6789},"end":{"line":185,"column":9,"offset":6797},"indent":[]},"data":{"id":"实例化图","htmlAttributes":{"id":"实例化图"},"hProperties":{"id":"实例化图"}}},{"type":"paragraph","children":[{"type":"text","value":"在这一步中，我们在实例化图时，并为之指定边绑定插件、节点类型（刚才自定义的 pie-node）、节点样式、边样式（渐变色）。","position":{"start":{"line":186,"column":1,"offset":6798},"end":{"line":186,"column":63,"offset":6860},"indent":[]}}],"position":{"start":{"line":186,"column":1,"offset":6798},"end":{"line":186,"column":63,"offset":6860},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
const edgeBundling = new Bundling({\n  bundleThreshold: 0.6, // 绑定的容忍度。数值越低，被绑定在一起的边相似度越高，即被绑在一起的边更少。\n  K: 100, // 绑定的强度\n});\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 1000,\n  height: 800,\n  plugins: [edgeBundling], // 加入插件\n  fitView: true,\n  defaultNode: {\n    size: 3,\n    color: 'steelblue',\n    fill: 'steelblue',\n  },\n  nodeStyle: {\n    default: {\n      lineWidth: 0,\n      fill: 'steelblue',\n    },\n  },\n  edgeStyle: {\n    default: {\n      lineWidth: 0.7,\n      strokeOpacity: 0.1, // 设置边透明度，在边聚集的部分透明度将会叠加，从而具备突出高密度区域的效果\n      stroke: 'l(0) 0:' + llightBlue16 + ' 1:' + llightOrange16,\n    },\n  },\n});\n
","position":{"start":{"line":187,"column":1,"offset":6861},"end":{"line":217,"column":4,"offset":7530},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"这里出发端的颜色为 ","position":{"start":{"line":219,"column":1,"offset":7532},"end":{"line":219,"column":11,"offset":7542},"indent":[]}},{"type":"html","value":"llightBlue16","position":{"start":{"line":219,"column":11,"offset":7542},"end":{"line":219,"column":25,"offset":7556},"indent":[]}},{"type":"text","value":"，结束端的颜色为 ","position":{"start":{"line":219,"column":25,"offset":7556},"end":{"line":219,"column":34,"offset":7565},"indent":[]}},{"type":"html","value":"llightOrange16","position":{"start":{"line":219,"column":34,"offset":7565},"end":{"line":219,"column":50,"offset":7581},"indent":[]}},{"type":"text","value":"：","position":{"start":{"line":219,"column":50,"offset":7581},"end":{"line":219,"column":51,"offset":7582},"indent":[]}}],"position":{"start":{"line":219,"column":1,"offset":7532},"end":{"line":219,"column":51,"offset":7582},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
const llightBlue16 = '#C8FDFC';\nconst llightOrange16 = '#FFAA86';\n
","position":{"start":{"line":220,"column":1,"offset":7583},"end":{"line":223,"column":4,"offset":7666},"indent":[1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"为了配合节点和边的颜色，这里将页面的 body 的颜色设置为黑色：","position":{"start":{"line":225,"column":1,"offset":7668},"end":{"line":225,"column":34,"offset":7701},"indent":[]}}],"position":{"start":{"line":225,"column":1,"offset":7668},"end":{"line":225,"column":34,"offset":7701},"indent":[]}},{"type":"html","lang":"html","meta":null,"value":"
<style>\n  body{\n    background: rgb(0, 0, 0);\n  }\n</style>
","position":{"start":{"line":226,"column":1,"offset":7702},"end":{"line":232,"column":4,"offset":7772},"indent":[1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#执行绑定和渲染","title":null,"children":[],"data":{"hProperties":{"aria-label":"执行绑定和渲染 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"执行绑定和渲染","position":{"start":{"line":234,"column":5,"offset":7778},"end":{"line":234,"column":12,"offset":7785},"indent":[]}}],"position":{"start":{"line":234,"column":1,"offset":7774},"end":{"line":234,"column":12,"offset":7785},"indent":[]},"data":{"id":"执行绑定和渲染","htmlAttributes":{"id":"执行绑定和渲染"},"hProperties":{"id":"执行绑定和渲染"}}},{"type":"paragraph","children":[{"type":"text","value":"有了 graph 实例和 edgeBundling 实例后，我们执行下面代码进行绑定操作和图的数据读入及渲染：","position":{"start":{"line":235,"column":1,"offset":7786},"end":{"line":235,"column":56,"offset":7841},"indent":[]}}],"position":{"start":{"line":235,"column":1,"offset":7786},"end":{"line":235,"column":56,"offset":7841},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
edgeBundling.bundling(data); // 执行插件的绑定操作\ngraph.data(data);\ngraph.render();\n
","position":{"start":{"line":236,"column":1,"offset":7842},"end":{"line":240,"column":4,"offset":7935},"indent":[1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#设置-tooltip-与交互操作","title":null,"children":[],"data":{"hProperties":{"aria-label":"设置 tooltip 与交互操作 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"设置 tooltip 与交互操作","position":{"start":{"line":243,"column":6,"offset":7943},"end":{"line":243,"column":22,"offset":7959},"indent":[]}}],"position":{"start":{"line":243,"column":1,"offset":7938},"end":{"line":243,"column":22,"offset":7959},"indent":[]},"data":{"id":"设置-tooltip-与交互操作","htmlAttributes":{"id":"设置-tooltip-与交互操作"},"hProperties":{"id":"设置-tooltip-与交互操作"}}},{"type":"paragraph","children":[{"type":"text","value":"使用 tooltip，可以在鼠标 hover 到节点上时展示该节点的其他属性值。首先在 html 中设定 tooltip 的样式：","position":{"start":{"line":244,"column":1,"offset":7960},"end":{"line":244,"column":66,"offset":8025},"indent":[]}}],"position":{"start":{"line":244,"column":1,"offset":7960},"end":{"line":244,"column":66,"offset":8025},"indent":[]}},{"type":"html","lang":"html","meta":null,"value":"
<style>\n  .g6-tooltip {\n    border: 1px solid #e2e2e2;\n    border-radius: 4px;\n    font-size: 12px;\n    color: #545454;\n    background-color: rgba(255, 255, 255, 0.9);\n    padding: 10px 8px;\n    box-shadow: rgb(174, 174, 174) 0px 0px 10px;\n  }\n</style>
","position":{"start":{"line":245,"column":1,"offset":8026},"end":{"line":257,"column":4,"offset":8290},"indent":[1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"然后，在上一步实例化 ","position":{"start":{"line":259,"column":1,"offset":8292},"end":{"line":259,"column":12,"offset":8303},"indent":[]}},{"type":"html","value":"graph","position":{"start":{"line":259,"column":12,"offset":8303},"end":{"line":259,"column":19,"offset":8310},"indent":[]}},{"type":"text","value":" 时，增加一个名为 ","position":{"start":{"line":259,"column":19,"offset":8310},"end":{"line":259,"column":29,"offset":8320},"indent":[]}},{"type":"html","value":"modes","position":{"start":{"line":259,"column":29,"offset":8320},"end":{"line":259,"column":36,"offset":8327},"indent":[]}},{"type":"text","value":" 的配置项到参数中，如下写法启动了 ","position":{"start":{"line":259,"column":36,"offset":8327},"end":{"line":259,"column":54,"offset":8345},"indent":[]}},{"type":"html","value":"drag-canvas","position":{"start":{"line":259,"column":54,"offset":8345},"end":{"line":259,"column":67,"offset":8358},"indent":[]}},{"type":"text","value":" 画图拖动操作、","position":{"start":{"line":259,"column":67,"offset":8358},"end":{"line":259,"column":75,"offset":8366},"indent":[]}},{"type":"html","value":"zoom-canvas","position":{"start":{"line":259,"column":75,"offset":8366},"end":{"line":259,"column":88,"offset":8379},"indent":[]}},{"type":"text","value":" 画布放缩操作，以及 ","position":{"start":{"line":259,"column":88,"offset":8379},"end":{"line":259,"column":99,"offset":8390},"indent":[]}},{"type":"html","value":"tooltip","position":{"start":{"line":259,"column":99,"offset":8390},"end":{"line":259,"column":108,"offset":8399},"indent":[]}},{"type":"text","value":"，在 ","position":{"start":{"line":259,"column":108,"offset":8399},"end":{"line":259,"column":111,"offset":8402},"indent":[]}},{"type":"html","value":"formatText","position":{"start":{"line":259,"column":111,"offset":8402},"end":{"line":259,"column":123,"offset":8414},"indent":[]}},{"type":"text","value":" 函数中指定了 ","position":{"start":{"line":259,"column":123,"offset":8414},"end":{"line":259,"column":131,"offset":8422},"indent":[]}},{"type":"html","value":"tooltip","position":{"start":{"line":259,"column":131,"offset":8422},"end":{"line":259,"column":140,"offset":8431},"indent":[]}},{"type":"text","value":" 显示的文本内容：","position":{"start":{"line":259,"column":140,"offset":8431},"end":{"line":259,"column":149,"offset":8440},"indent":[]}}],"position":{"start":{"line":259,"column":1,"offset":8292},"end":{"line":259,"column":149,"offset":8440},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
 modes: {\n   default: [ 'drag-canvas', 'zoom-canvas', {\n     type: 'tooltip',\n     formatText(model) {\n       const text = 'Longitude: ' + model.lon + '\\n Latitude: ' + model.lat;\n       return text;\n     },\n     shouldUpdate: e => {\n       return true;\n     }\n   }]\n }
","position":{"start":{"line":260,"column":1,"offset":8441},"end":{"line":273,"column":4,"offset":8728},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"这样，当鼠标移动到节点上时，带有经纬度信息的 ","position":{"start":{"line":275,"column":1,"offset":8730},"end":{"line":275,"column":24,"offset":8753},"indent":[]}},{"type":"html","value":"tooltip","position":{"start":{"line":275,"column":24,"offset":8753},"end":{"line":275,"column":33,"offset":8762},"indent":[]}},{"type":"text","value":" 将会出现：","position":{"start":{"line":275,"column":33,"offset":8762},"end":{"line":275,"column":39,"offset":8768},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":275,"column":39,"offset":8768},"end":{"line":275,"column":45,"offset":8774},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1564995648674-8bc9a379-d48b-48d7-b63d-3e414768c8a9.png#align=left&display=inline&height=146&name=image.png&originHeight=262&originWidth=666&search=&size=229546&status=done&width=370.00000980165294","alt":"image.png","position":{"start":{"line":275,"column":45,"offset":8774},"end":{"line":275,"column":301,"offset":9030},"indent":[]}}],"position":{"start":{"line":275,"column":1,"offset":8730},"end":{"line":275,"column":301,"offset":9030},"indent":[]}},{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"tooltip","position":{"start":{"line":276,"column":3,"offset":9033},"end":{"line":276,"column":10,"offset":9040},"indent":[]}}],"position":{"start":{"line":276,"column":3,"offset":9033},"end":{"line":276,"column":10,"offset":9040},"indent":[]}}],"position":{"start":{"line":276,"column":1,"offset":9031},"end":{"line":276,"column":10,"offset":9040},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"同时，可以拖拽和放缩画布：","position":{"start":{"line":279,"column":1,"offset":9043},"end":{"line":279,"column":14,"offset":9056},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/gif/156681/1564995648669-120d675c-04ac-40a6-8b28-3872327960d1.gif#align=left&display=inline&height=699&name=airline-bundling-interact.gif&originHeight=699&originWidth=1002&search=&size=2613127&status=done&width=1002","alt":"airline-bundling-interact.gif","position":{"start":{"line":279,"column":14,"offset":9056},"end":{"line":279,"column":298,"offset":9340},"indent":[]}}],"position":{"start":{"line":279,"column":1,"offset":9043},"end":{"line":279,"column":298,"offset":9340},"indent":[]}},{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"缩放和拖动画布。","position":{"start":{"line":280,"column":3,"offset":9343},"end":{"line":280,"column":11,"offset":9351},"indent":[]}}],"position":{"start":{"line":280,"column":3,"offset":9343},"end":{"line":280,"column":11,"offset":9351},"indent":[]}}],"position":{"start":{"line":280,"column":1,"offset":9341},"end":{"line":280,"column":11,"offset":9351},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#分析","title":null,"children":[],"data":{"hProperties":{"aria-label":"分析 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"分析","position":{"start":{"line":283,"column":4,"offset":9357},"end":{"line":283,"column":6,"offset":9359},"indent":[]}}],"position":{"start":{"line":283,"column":1,"offset":9354},"end":{"line":283,"column":6,"offset":9359},"indent":[]},"data":{"id":"分析","htmlAttributes":{"id":"分析"},"hProperties":{"id":"分析"}}},{"type":"paragraph","children":[{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1564995648703-5630a47e-250c-4fc3-845a-3f1fe176e2c9.png#align=left&display=inline&height=487&name=image.png&originHeight=876&originWidth=1984&search=&size=1674617&status=done&width=1102.2222514211403","alt":"image.png","position":{"start":{"line":284,"column":1,"offset":9360},"end":{"line":284,"column":259,"offset":9618},"indent":[]}}],"position":{"start":{"line":284,"column":1,"offset":9360},"end":{"line":284,"column":259,"offset":9618},"indent":[]}},{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"最终效果图。节点大小代表飞入及飞出该城市航线总数。节点饼图展示飞出与飞入航线比例统计信息（橙红色为飞入，青色为飞出）。边的渐变色代表航班的飞行方向。起始端：青色；结束端：橙红色。","position":{"start":{"line":285,"column":3,"offset":9621},"end":{"line":285,"column":92,"offset":9710},"indent":[]}}],"position":{"start":{"line":285,"column":3,"offset":9621},"end":{"line":285,"column":92,"offset":9710},"indent":[]}}],"position":{"start":{"line":285,"column":1,"offset":9619},"end":{"line":285,"column":92,"offset":9710},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"最后，让我们一起分析如下的最终结果图给我们带来的信息：","position":{"start":{"line":288,"column":1,"offset":9713},"end":{"line":288,"column":28,"offset":9740},"indent":[]}}],"position":{"start":{"line":288,"column":1,"offset":9713},"end":{"line":288,"column":28,"offset":9740},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"大节点主要集中在中偏东部，根据其经纬度，可以推测这些城市有：亚特兰大、纽约、芝加哥、休斯顿、堪萨斯等，这些城市都是美国重要的交通枢纽；","position":{"start":{"line":290,"column":3,"offset":9744},"end":{"line":290,"column":70,"offset":9811},"indent":[]}}],"position":{"start":{"line":290,"column":3,"offset":9744},"end":{"line":290,"column":70,"offset":9811},"indent":[]}}],"position":{"start":{"line":290,"column":1,"offset":9742},"end":{"line":290,"column":70,"offset":9811},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"美国东部的线桔红色居多，说明东部城市的飞入航班较多；","position":{"start":{"line":291,"column":3,"offset":9814},"end":{"line":291,"column":29,"offset":9840},"indent":[]}}],"position":{"start":{"line":291,"column":3,"offset":9814},"end":{"line":291,"column":29,"offset":9840},"indent":[]}}],"position":{"start":{"line":291,"column":1,"offset":9812},"end":{"line":291,"column":29,"offset":9840},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"相反，西部城市的飞出航班较多；","position":{"start":{"line":292,"column":3,"offset":9843},"end":{"line":292,"column":18,"offset":9858},"indent":[]}}],"position":{"start":{"line":292,"column":3,"offset":9843},"end":{"line":292,"column":18,"offset":9858},"indent":[]}}],"position":{"start":{"line":292,"column":1,"offset":9841},"end":{"line":292,"column":18,"offset":9858},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"整体飞行方向从东至西；","position":{"start":{"line":293,"column":3,"offset":9861},"end":{"line":293,"column":14,"offset":9872},"indent":[]}}],"position":{"start":{"line":293,"column":3,"offset":9861},"end":{"line":293,"column":14,"offset":9872},"indent":[]}}],"position":{"start":{"line":293,"column":1,"offset":9859},"end":{"line":293,"column":14,"offset":9872},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"东部的航线也较之于西部更加密集、频繁；","position":{"start":{"line":294,"column":3,"offset":9875},"end":{"line":294,"column":22,"offset":9894},"indent":[]}}],"position":{"start":{"line":294,"column":3,"offset":9875},"end":{"line":294,"column":22,"offset":9894},"indent":[]}}],"position":{"start":{"line":294,"column":1,"offset":9873},"end":{"line":294,"column":22,"offset":9894},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"西海岸由西雅图和波特兰飞往洛杉矶的航班较多。","position":{"start":{"line":295,"column":3,"offset":9897},"end":{"line":295,"column":25,"offset":9919},"indent":[]}}],"position":{"start":{"line":295,"column":3,"offset":9897},"end":{"line":295,"column":25,"offset":9919},"indent":[]}}],"position":{"start":{"line":295,"column":1,"offset":9895},"end":{"line":295,"column":25,"offset":9919},"indent":[]}}],"position":{"start":{"line":290,"column":1,"offset":9742},"end":{"line":295,"column":25,"offset":9919},"indent":[1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"上述发现很容易被解释：美国东部是美国的经济、政治集中区域。","position":{"start":{"line":297,"column":1,"offset":9921},"end":{"line":297,"column":30,"offset":9950},"indent":[]}}],"position":{"start":{"line":297,"column":1,"offset":9921},"end":{"line":297,"column":30,"offset":9950},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":299,"column":1,"offset":9952}}}}