@antv/g6
Version:
graph visualization frame work
1 lines • 81 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ast-1efb3ed12d623110b841517107a9d245-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{"id":"背景"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E8%83%8C%E6%99%AF","aria-label":"背景 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"背景","position":{"start":{"line":3,"column":4,"offset":5},"end":{"line":3,"column":6,"offset":7}}}],"position":{"start":{"line":3,"column":1,"offset":2},"end":{"line":3,"column":6,"offset":7}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"大多数图数据在可视化时被展示成点-线图（Node-link Diagram）的形式。点-线图特别适用于如交通网络图一类的关系数据的展示，这种数据的节点通常带有地理位置信息，例如迁徙图、移民图、航线图等。","position":{"start":{"line":4,"column":1,"offset":8},"end":{"line":4,"column":102,"offset":109}}},{"type":"raw","value":"<br />","position":{"start":{"line":4,"column":102,"offset":109},"end":{"line":4,"column":108,"offset":115}}},{"type":"element","tagName":"img","properties":{"src":"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"},"children":[],"position":{"start":{"line":4,"column":108,"offset":115},"end":{"line":4,"column":352,"offset":359}}},{"type":"element","tagName":"img","properties":{"src":"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"},"children":[],"position":{"start":{"line":4,"column":352,"offset":359},"end":{"line":4,"column":596,"offset":603}}}],"position":{"start":{"line":4,"column":1,"offset":8},"end":{"line":4,"column":596,"offset":603}}},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"（左）图 1. 法国航线图。（右）图 2. 美国航线图。","position":{"start":{"line":5,"column":3,"offset":606},"end":{"line":5,"column":31,"offset":634}}}],"position":{"start":{"line":5,"column":3,"offset":606},"end":{"line":5,"column":31,"offset":634}}},{"type":"text","value":"\n"}],"position":{"start":{"line":5,"column":1,"offset":604},"end":{"line":5,"column":31,"offset":634}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"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"},"children":[],"position":{"start":{"line":8,"column":1,"offset":637},"end":{"line":8,"column":244,"offset":880}}},{"type":"element","tagName":"img","properties":{"src":"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"},"children":[],"position":{"start":{"line":8,"column":244,"offset":880},"end":{"line":8,"column":488,"offset":1124}}}],"position":{"start":{"line":8,"column":1,"offset":637},"end":{"line":8,"column":488,"offset":1124}}},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"（左）图 3. 世界网络 IXP 对等图。（右）图 4. 美国移民图。","position":{"start":{"line":9,"column":3,"offset":1127},"end":{"line":9,"column":38,"offset":1162}}}],"position":{"start":{"line":9,"column":3,"offset":1127},"end":{"line":9,"column":38,"offset":1162}}},{"type":"text","value":"\n"}],"position":{"start":{"line":9,"column":1,"offset":1125},"end":{"line":9,"column":38,"offset":1162}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"问题"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%97%AE%E9%A2%98","aria-label":"问题 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"问题","position":{"start":{"line":11,"column":4,"offset":1167},"end":{"line":11,"column":6,"offset":1169}}}],"position":{"start":{"line":11,"column":1,"offset":1164},"end":{"line":11,"column":6,"offset":1169}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"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}}},{"type":"element","tagName":"a","properties":{"href":"https://yuque.antfin-inc.com/shiwu.wyy/go1ec6/znmtuw","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"链接","position":{"start":{"line":12,"column":223,"offset":1392},"end":{"line":12,"column":225,"offset":1394}}}],"position":{"start":{"line":12,"column":222,"offset":1391},"end":{"line":12,"column":280,"offset":1449}}},{"type":"text","value":"】。","position":{"start":{"line":12,"column":280,"offset":1449},"end":{"line":12,"column":282,"offset":1451}}}],"position":{"start":{"line":12,"column":1,"offset":1170},"end":{"line":12,"column":282,"offset":1451}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"例如下面这一个复杂的美国航线数据集，节点代表美国城市，带有坐标和经纬度信息；一条边代表一条航线：","position":{"start":{"line":14,"column":1,"offset":1453},"end":{"line":14,"column":49,"offset":1501}}}],"position":{"start":{"line":14,"column":1,"offset":1453},"end":{"line":14,"column":49,"offset":1501}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{</span>\n <span class=\"token property\">\"nodes\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">\"x\"</span><span class=\"token operator\">:</span> <span class=\"token number\">-922.24444</span><span class=\"token punctuation\">,</span>\n <span class=\"token property\">\"y\"</span><span class=\"token operator\">:</span> <span class=\"token number\">347.29444</span><span class=\"token punctuation\">,</span>\n <span class=\"token property\">\"id\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"0\"</span><span class=\"token punctuation\">,</span>\n <span class=\"token property\">\"lon\"</span><span class=\"token operator\">:</span> <span class=\"token number\">-92.224444</span><span class=\"token punctuation\">,</span>\n <span class=\"token property\">\"lat\"</span><span class=\"token operator\">:</span> <span class=\"token number\">34.729444</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">\"x\"</span><span class=\"token operator\">:</span> <span class=\"token number\">-922.24444</span><span class=\"token punctuation\">,</span>\n <span class=\"token property\">\"y\"</span><span class=\"token operator\">:</span> <span class=\"token number\">347.29444</span><span class=\"token punctuation\">,</span>\n <span class=\"token property\">\"id\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"1\"</span><span class=\"token punctuation\">,</span>\n <span class=\"token property\">\"lon\"</span><span class=\"token operator\">:</span> <span class=\"token number\">-92.224444</span><span class=\"token punctuation\">,</span>\n <span class=\"token property\">\"lat\"</span><span class=\"token operator\">:</span> <span class=\"token number\">34.729444</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n ...\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token property\">\"edges\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token property\">\"source\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"0\"</span><span class=\"token punctuation\">,</span>\n <span class=\"token property\">\"target\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"21\"</span><span class=\"token punctuation\">,</span>\n <span class=\"token property\">\"id\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"e0\"</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">\"source\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"2\"</span><span class=\"token punctuation\">,</span>\n <span class=\"token property\">\"target\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"13\"</span><span class=\"token punctuation\">,</span>\n <span class=\"token property\">\"id\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"e1\"</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n ...\n <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span></code></pre></div>","position":{"start":{"line":15,"column":1,"offset":1502},"end":{"line":45,"column":4,"offset":1995}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"如果使用 G6 简单地将节点和边渲染出来，将会得到如下结果：","position":{"start":{"line":47,"column":1,"offset":1997},"end":{"line":47,"column":31,"offset":2027}}},{"type":"raw","value":"<br />","position":{"start":{"line":47,"column":31,"offset":2027},"end":{"line":47,"column":37,"offset":2033}}},{"type":"element","tagName":"img","properties":{"src":"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"},"children":[],"position":{"start":{"line":47,"column":37,"offset":2033},"end":{"line":47,"column":294,"offset":2290}}}],"position":{"start":{"line":47,"column":1,"offset":1997},"end":{"line":47,"column":294,"offset":2290}}},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"图 5. G6 渲染原始数据结果","position":{"start":{"line":48,"column":3,"offset":2293},"end":{"line":48,"column":19,"offset":2309}}}],"position":{"start":{"line":48,"column":3,"offset":2293},"end":{"line":48,"column":19,"offset":2309}}},{"type":"text","value":"\n"}],"position":{"start":{"line":48,"column":1,"offset":2291},"end":{"line":48,"column":19,"offset":2309}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"我们发现简单地将该数据渲染后的结果航线纵横交错，穿梭在密集的城市当中，视觉上十分混乱，即难以看清细节，也不能发现航线的总体趋势。","position":{"start":{"line":51,"column":1,"offset":2312},"end":{"line":51,"column":65,"offset":2376}}}],"position":{"start":{"line":51,"column":1,"offset":2312},"end":{"line":51,"column":65,"offset":2376}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"期待效果"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%9C%9F%E5%BE%85%E6%95%88%E6%9E%9C","aria-label":"期待效果 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"期待效果","position":{"start":{"line":54,"column":4,"offset":2382},"end":{"line":54,"column":8,"offset":2386}}}],"position":{"start":{"line":54,"column":1,"offset":2379},"end":{"line":54,"column":8,"offset":2386}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"我们希望可以通过边绑定的方法降低图 5 的视觉混乱，从而清晰图的整体走势、结构，突出航线频繁的城市，它们可能是重要的交通枢纽，并展示更多的统计信息，以便观察者进行分析。借助 G6，我们可以实现如下效果。通过边绑定，边的交错混乱情况被降低，颜色映射航班的飞行方向（出发（橙红色）与降落（青色））。节点大小表示到达与离开该城市的航班总数量，每个节点使用了饼图展示达到（橙红色）和离开（青色）航班的比例。并增加 hover 的交互，使用 tooltip 展示每个城市的经纬度。","position":{"start":{"line":55,"column":1,"offset":2387},"end":{"line":55,"column":236,"offset":2622}}},{"type":"raw","value":"<br />","position":{"start":{"line":55,"column":236,"offset":2622},"end":{"line":55,"column":242,"offset":2628}}},{"type":"element","tagName":"img","properties":{"src":"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"},"children":[],"position":{"start":{"line":55,"column":242,"offset":2628},"end":{"line":55,"column":523,"offset":2909}}}],"position":{"start":{"line":55,"column":1,"offset":2387},"end":{"line":55,"column":523,"offset":2909}}},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"期待效果图及 tooltip 效果。","position":{"start":{"line":56,"column":3,"offset":2912},"end":{"line":56,"column":21,"offset":2930}}}],"position":{"start":{"line":56,"column":3,"offset":2912},"end":{"line":56,"column":21,"offset":2930}}},{"type":"text","value":"\n"}],"position":{"start":{"line":56,"column":1,"offset":2910},"end":{"line":56,"column":21,"offset":2930}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"实现步骤"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%AE%9E%E7%8E%B0%E6%AD%A5%E9%AA%A4","aria-label":"实现步骤 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"实现步骤","position":{"start":{"line":60,"column":4,"offset":2937},"end":{"line":60,"column":8,"offset":2941}}}],"position":{"start":{"line":60,"column":1,"offset":2934},"end":{"line":60,"column":8,"offset":2941}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"统计必要信息"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%BB%9F%E8%AE%A1%E5%BF%85%E8%A6%81%E4%BF%A1%E6%81%AF","aria-label":"统计必要信息 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"统计必要信息","position":{"start":{"line":62,"column":5,"offset":2947},"end":{"line":62,"column":11,"offset":2953}}}],"position":{"start":{"line":62,"column":1,"offset":2943},"end":{"line":62,"column":11,"offset":2953}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"首先，我们使用简单的 JS 根据数据统计每个节点的总度数（degree，即出入该城市的航线总数）、出度（outDegree，即飞出该城市的航线数）、入度（inDegree，即飞入该城市成航线数），为后续映射到节点上做好准备。","position":{"start":{"line":63,"column":1,"offset":2954},"end":{"line":63,"column":113,"offset":3066}}}],"position":{"start":{"line":63,"column":1,"offset":2954},"end":{"line":63,"column":113,"offset":3066}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> nodes <span class=\"token operator\">=</span> data<span class=\"token punctuation\">.</span>nodes<span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> edges <span class=\"token operator\">=</span> data<span class=\"token punctuation\">.</span>edges<span class=\"token punctuation\">;</span>\nnodes<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">n</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n n<span class=\"token punctuation\">.</span>y <span class=\"token operator\">=</span> <span class=\"token operator\">-</span>n<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">;</span>\n n<span class=\"token punctuation\">.</span>degree <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n n<span class=\"token punctuation\">.</span>inDegree <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n n<span class=\"token punctuation\">.</span>outDegree <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token comment\">// compute the degree of each node</span>\n<span class=\"token keyword\">const</span> nodeIdMap <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Map</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nnodes<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">node</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n nodeIdMap<span class=\"token punctuation\">.</span><span class=\"token function\">set</span><span class=\"token punctuation\">(</span>node<span class=\"token punctuation\">.</span>id<span class=\"token punctuation\">,</span> node<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nedges<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">e</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> source <span class=\"token operator\">=</span> nodeIdMap<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span>e<span class=\"token punctuation\">.</span>source<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> target <span class=\"token operator\">=</span> nodeIdMap<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span>e<span class=\"token punctuation\">.</span>target<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n source<span class=\"token punctuation\">.</span>outDegree<span class=\"token operator\">++</span><span class=\"token punctuation\">;</span>\n target<span class=\"token punctuation\">.</span>inDegree<span class=\"token operator\">++</span><span class=\"token punctuation\">;</span>\n source<span class=\"token punctuation\">.</span>degree<span class=\"token operator\">++</span><span class=\"token punctuation\">;</span>\n target<span class=\"token punctuation\">.</span>degree<span class=\"token operator\">++</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">let</span> maxDegree <span class=\"token operator\">=</span> <span class=\"token operator\">-</span><span class=\"token number\">9999</span><span class=\"token punctuation\">,</span>\n minDegree <span class=\"token operator\">=</span> <span class=\"token number\">9999</span><span class=\"token punctuation\">;</span>\nnodes<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">n</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>maxDegree <span class=\"token operator\"><</span> n<span class=\"token punctuation\">.</span>degree<span class=\"token punctuation\">)</span> maxDegree <span class=\"token operator\">=</span> n<span class=\"token punctuation\">.</span>degree<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>minDegree <span class=\"token operator\">></span> n<span class=\"token punctuation\">.</span>degree<span class=\"token punctuation\">)</span> minDegree <span class=\"token operator\">=</span> n<span class=\"token punctuation\">.</span>degree<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> sizeRange <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">20</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> degreeDataRange <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>minDegree<span class=\"token punctuation\">,</span> maxDegree<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n<span class=\"token comment\">// 将范围是 degreeDataRange 的 degree 属性映射到范围 sizeRange 上后，</span>\n<span class=\"token comment\">// 写入到 nodes 中元素的‘size’属性中</span>\n<span class=\"token function\">scaleNodeProp</span><span class=\"token punctuation\">(</span>nodes<span class=\"token punctuation\">,</span> <span class=\"token string\">'size'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'degree'</span><span class=\"token punctuation\">,</span> degreeDataRange<span class=\"token punctuation\">,</span> sizeRange<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":64,"column":1,"offset":3067},"end":{"line":96,"column":4,"offset":3933}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"raw","value":"<code class=\"language-text\">scaleNodeProp()</code>","position":{"start":{"line":98,"column":1,"offset":3935},"end":{"line":98,"column":18,"offset":3952}}},{"type":"text","value":" 方法将指定的节点属性 ","position":{"start":{"line":98,"column":18,"offset":3952},"end":{"line":98,"column":30,"offset":3964}}},{"type":"raw","value":"<code class=\"language-text\">refPropName</code>","position":{"start":{"line":98,"column":30,"offset":3964},"end":{"line":98,"column":43,"offset":3977}}},{"type":"text","value":" 根据给定数值范围 ","position":{"start":{"line":98,"column":43,"offset":3977},"end":{"line":98,"column":53,"offset":3987}}},{"type":"raw","value":"<code class=\"language-text\">outRange</code>","position":{"start":{"line":98,"column":53,"offset":3987},"end":{"line":98,"column":63,"offset":3997}}},{"type":"text","value":" 归一化，映射到另一个属性 ","position":{"start":{"line":98,"column":63,"offset":3997},"end":{"line":98,"column":77,"offset":4011}}},{"type":"raw","value":"<code class=\"language-text\">propName</code>","position":{"start":{"line":98,"column":77,"offset":4011},"end":{"line":98,"column":87,"offset":4021}}},{"type":"text","value":" 上：","position":{"start":{"line":98,"column":87,"offset":4021},"end":{"line":98,"column":90,"offset":4024}}}],"position":{"start":{"line":98,"column":1,"offset":3935},"end":{"line":98,"column":90,"offset":4024}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">/**\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 */</span>\n<span class=\"token keyword\">function</span> <span class=\"token function\">scaleNodeProp</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">nodes<span class=\"token punctuation\">,</span> propName<span class=\"token punctuation\">,</span> refPropName<span class=\"token punctuation\">,</span> dataRange<span class=\"token punctuation\">,</span> outRange</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> outLength <span class=\"token operator\">=</span> outRange<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">-</span> outRange<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> dataLength <span class=\"token operator\">=</span> dataRange<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">-</span> dataRange<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n nodes<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">n</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n n<span class=\"token punctuation\">[</span>propName<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span>\n <span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span>n<span class=\"token punctuation\">[</span>refPropName<span class=\"token punctuation\">]</span> <span class=\"token operator\">-</span> dataRange<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> outLength<span class=\"token punctuation\">)</span> <span class=\"token operator\">/</span> dataLength <span class=\"token operator\">+</span> outRange<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div>","position":{"start":{"line":99,"column":1,"offset":4025},"end":{"line":115,"column":4,"offset":4589}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"通过上面两段代码，我们已经将归一化的度数映射到节点大小 ","position":{"start":{"line":117,"column":1,"offset":4591},"end":{"line":117,"column":29,"offset":4619}}},{"type":"raw","value":"<code class=\"language-text\">size</code>","position":{"start":{"line":117,"column":29,"offset":4619},"end":{"line":117,"column":35,"offset":4625}}},{"type":"text","value":" 上。","position":{"start":{"line":117,"column":35,"offset":4625},"end":{"line":117,"column":38,"offset":4628}}}],"position":{"start":{"line":117,"column":1,"offset":4591},"end":{"line":117,"column":38,"offset":4628}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"实例化边绑定插件"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%AE%9E%E4%BE%8B%E5%8C%96%E8%BE%B9%E7%BB%91%E5%AE%9A%E6%8F%92%E4%BB%B6","aria-label":"实例化边绑定插件 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"实例化边绑定插件","position":{"start":{"line":120,"column":5,"offset":4635},"end":{"line":120,"column":13,"offset":4643}}}],"position":{"start":{"line":120,"column":1,"offset":4631},"end":{"line":120,"column":13,"offset":4643}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"G6 中提供的边绑定插件是基于 FEDB（","position":{"start":{"line":121,"column":1,"offset":4644},"end":{"line":121,"column":22,"offset":4665}}},{"type":"element","tagName":"a","properties":{"href":"http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.212.7989&rep=rep1&type=pdf","target":"_self","rel":"nofollow"},"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}}}],"position":{"start":{"line":121,"column":22,"offset":4665},"end":{"line":121,"column":161,"offset":4804}}},{"type":"text","value":"）一文的实现。可以通过调节参数调整边绑定的效果。","position":{"start":{"line":121,"column":161,"offset":4804},"end":{"line":121,"column":185,"offset":4828}}}],"position":{"start":{"line":121,"column":1,"offset":4644},"end":{"line":121,"column":185,"offset":4828}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> edgeBundling <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Bundling</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n bundleThreshold<span class=\"token punctuation\">:</span> <span class=\"token number\">0.6</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 绑定的容忍度。数值越低，被绑定在一起的边相似度越高，即被绑在一起的边更少。</span>\n <span class=\"token constant\">K</span><span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 绑定的强度</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":122,"column":1,"offset":4829},"end":{"line":127,"column":4,"offset":4974}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"自定义饼图节点"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A5%BC%E5%9B%BE%E8%8A%82%E7%82%B9","aria-label":"自定义饼图节点 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"自定义饼图节点","position":{"start":{"line":130,"column":5,"offset":4981},"end":{"line":130,"column":12,"offset":4988}}}],"position":{"start":{"line":130,"column":1,"offset":4977},"end":{"line":130,"column":12,"offset":4988}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在第一步中，我们已经为节点大小 size 映射了每个节点的总度数。为了更详细展示每个城市飞出和飞入航班的比例，我们希望在每个节点上显示一个类似于饼图的效果。例如","position":{"start":{"line":131,"column":1,"offset":4989},"end":{"line":131,"column":81,"offset":5069}}},{"type":"element","tagName":"img","properties":{"src":"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"},"children":[],"position":{"start":{"line":131,"column":81,"offset":5069},"end":{"line":131,"column":319,"offset":5307}}},{"type":"text","value":" ，桔红色扇形代表飞入该城市的航班比例，青色代表飞出该城市的航班比例。G6 原生的 circle 、rect 等节点形状不能满足这一需求，但 G6 提供了节点的扩展机制，通过下面的代码片段，可以在 G6 中注册一个自定义的节点：","position":{"start":{"line":131,"column":319,"offset":5307},"end":{"line":131,"column":433,"offset":5421}}}],"position":{"start":{"line":131,"column":1,"offset":4989},"end":{"line":131,"column":433,"offset":5421}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> lightBlue <span class=\"token operator\">=</span> <span class=\"token string\">'rgb(119, 243, 252)'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> lightOrange <span class=\"token operator\">=</span> <span class=\"token string\">'rgb(230, 100, 64)'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 注册自定义名为 pie-node 的节点类型</span>\n<span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerNode</span><span class=\"token punctuation\">(</span>\n <span class=\"token string\">'pie-node'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token function-variable function\">drawShape</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg<span class=\"token punctuation\">,</span> group</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> radius <span class=\"token operator\">=</span> cfg<span class=\"token punctuation\">.</span>size <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 节点半径</span>\n <span class=\"token keyword\">const</span> inPercentage <span class=\"token operator\">=</span> cfg<span class=\"token punctuation\">.</span>inDegree <span class=\"token operator\">/</span> cfg<span class=\"token punctuation\">.</span>degree<span class=\"token punctuation\">;</span> <span class=\"token comment\">// 入度占总度数的比例</span>\n <span class=\"token keyword\">const</span> inAngle <span class=\"token operator\">=</span> inPercentage <span class=\"token operator\">*</span> Math<span class=\"token punctuation\">.</span><span class=\"token constant\">PI</span> <span class=\"token operator\">*</span> <span class=\"token number\">2</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 入度在饼图中的夹角大小</span>\n <span class=\"token keyword\">const</span> outAngle <span class=\"token operator\">=</span> Math<span class=\"token punctuation\">.</span><span class=\"token constant\">PI</span> <span class=\"token operator\">*</span> <span class=\"token number\">2</span> <span class=\"token operator\">-</span> inAngle<span class=\"token punctuation\">;</span> <span class=\"token comment\">// 出度在饼图中的夹角大小</span>\n <span class=\"token keyword\">const</span> inArcEnd <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>radius <span class=\"token operator\">*</span> Math<span class=\"token punctuation\">.</span><span class=\"token function\">cos</span><span class=\"token punctuation\">(</span>inAngle<span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> radius <span class=\"token operator\">*</span> Math<span class=\"token punctuation\">.</span><span class=\"token function\">sin</span><span class=\"token punctuation\">(</span>inAngle<span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">//入度饼图弧结束位置</span>\n <span class=\"token keyword\">let</span> isInBigArc <span class=\"token operator\">=</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span>\n isOutBigArc <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>inAngle <span class=\"token operator\">></span> Math<span class=\"token punctuation\">.</span><span class=\"token constant\">PI</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n isInBigArc <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n isOutBigArc <span class=\"token operator\">=</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token comment\">// 定义代表入度的扇形形状</span>\n <span class=\"token keyword\">const</span> fanIn <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'path'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n path<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">[</span><span class=\"token string\">'M'</span><span class=\"token punctuation\">,</span> radius<span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token string\">'A'</span><span class=\"token punctuation\">,</span> radius<span class=\"token punctuation\">,</span> radius<span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span> isInBigArc<span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span> inArcEnd<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> inArcEnd<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token string\">'L'</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token string\">'B'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n lineWidth<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n fill<span class=\"token punctuation\">:</span> lightOrange<span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 定义代表出度的扇形形状</span>\n <span class=\"token keyword\">const</span> fanOut <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'path'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n path<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">[</span><span class=\"token string\">'M'</span><span class=\"token punctuation\">,</span> inArcEnd<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> inArcEnd<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token string\">'A'</span><span class=\"token punctuation\">,</span> radius<span class=\"token punctuation\">,</span> radius<span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span> isOutBigArc<span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span> radius<span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token string\">'L'</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token string\">'B'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n lineWidth<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n fill<span class=\"token punctuation\">:</span> lightBlue<span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 返回 keyshape</span>\n <span class=\"token keyword\">return</span> fanIn<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'single-shape'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":132,"column":1,"offset":5422},"end":{"line":181,"column":4,"offset":6750}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"这样，我们就在 G6 中注册了一个名为 pie-node 的节点类型。","position":{"start":{"line":182,"column":1,"offset":6751},"end":{"line":182,"column":36,"offset":6786}}}],"position":{"start":{"line":182,"column":1,"offset":6751},"end":{"line":182,"column":36,"offset":6786}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"实例化图"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%AE%9E%E4%BE%8B%E5%8C%96%E5%9B%BE","aria-label":"实例化图 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"实例化图","position":{"start":{"line":185,"column":5,"offset":6793},"end":{"line":185,"column":9,"offset":6797}}}],"position":{"start":{"line":185,"column":1,"offset":6789},"end":{"line":185,"column":9,"offset":6797}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在这一步中，我们在实例化图时，并为之指定边绑定插件、节点类型（刚才自定义的 pie-node）、节点样式、边样式（渐变色）。","position":{"start":{"line":186,"column":1,"offset":6798},"end":{"line":186,"column":63,"offset":6860}}}],"position":{"start":{"line":186,"column":1,"offset":6798},"end":{"line":186,"column":63,"offset":6860}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> edgeBundling <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Bundling</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n bundleThreshold<span class=\"token punctuation\">:</span> <span class=\"token number\">0.6</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 绑定的容忍度。数值越低，被绑定在一起的边相似度越高，即被绑在一起的边更少。</span>\n <span class=\"token constant\">K</span><span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 绑定的强度</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">G6<span class=\"token punctuation\">.</span>Graph</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n container<span class=\"token punctuation\">:</span> <span class=\"token string\">'mountNode'</span><span class=\"token punctuation\">,</span>\n width<span class=\"token punctuation\">:</span> <span class=\"token number\">1000</span><span class=\"token punctuation\">,</span>\n height<span class=\"token punctuation\">:</span> <span class=\"token number\">800</span><span class=\"token punctuation\">,</span>\n plugins<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>edgeBundling<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 加入插件</span>\n fitView<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n defaultNode<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n size<span class=\"token punctuation\">:</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span>\n color<span class=\"token punctuation\">:</span> <span class=\"token string\">'steelblue'</span><span class=\"token punctuation\">,</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'steelblue'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n nodeStyle<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">default</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n lineWidth<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'steelblue'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n edgeStyle<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">default</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n lineWidth<span class=\"token punctuation\">:</span> <span class=\"token number\">0.7</span><span class=\"token punctuation\">,</span>\n strokeOpacity<span class=\"token punctuation\">:</span> <span class=\"token number\">0.1</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 设置边透明度，在边聚集的部分透明度将会叠加，从而具备突出高密度区域的效果</span>\n stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'l(0) 0:'</span> <span class=\"token operator\">+</span> llightBlue16 <span class=\"token operator\">+</span> <span class=\"token string\">' 1:'</span> <span class=\"token operator\">+</span> llightOrange16<span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":187,"column":1,"offset":6861},"end":{"line":217,"column":4,"offset":7530}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"这里出发端的颜色为 ","position":{"start":{"line":219,"column":1,"offset":7532},"end":{"line":219,"column":11,"offset":7542}}},{"type":"raw","value":"<code class=\"language-text\">llightBlue16</code>","position":{"start":{"line":219,"column":11,"offset":7542},"end":{"line":219,"column":25,"offset":7556}}},{"type":"text","value":"，结束端的颜色为 ","position":{"start":{"line":219,"column":25,"offset":7556},"end":{"line":219,"column":34,"offset":7565}}},{"type":"raw","value":"<code class=\"language-text\">llightOrange16</code>","position":{"start":{"line":219,"column":34,"offset":7565},"end":{"line":219,"column":50,"offset":7581}}},{"type":"text","value":"：","position":{"start":{"line":219,"column":50,"offset":7581},"end":{"line":219,"column":51,"offset":7582}}}],"position":{"start":{"line":219,"column":1,"offset":7532},"end":{"line":219,"column":51,"offset":7582}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> llightBlue16 <span class=\"token operator\">=</span> <span class=\"token string\">'#C8FDFC'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> llightOrange16 <span class=\"token operator\">=</span> <span class=\"token string\">'#FFAA86'</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":220,"column":1,"offset":7583},"end":{"line":223,"column":4,"offset":7666}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"为了配合节点和边的颜色，这里将页面的 body 的颜色设置为黑色：","position":{"start":{"line":225,"column":1,"offset":7668},"end":{"line":225,"column":34,"offset":7701}}}],"position":{"start":{"line":225,"column":1,"offset":7668},"end":{"line":225,"column":34,"offset":7701}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>style</span><span class=\"token punctuation\">></span></span><span class=\"token style\"><span class=\"token language-css\">\n <span class=\"token selector\">body</span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">background</span><span class=\"token punctuation\">:</span> <span class=\"token function\">rgb</span><span class=\"token punctuation\">(</span>0<span class=\"token punctuation\">,</span> 0<span class=\"token punctuation\">,</span> 0<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>style</span><span class=\"token punctuation\">></span></span></code></pre></div>","position":{"start":{"line":226,"column":1,"offset":7702},"end":{"line":232,"column":4,"offset":7772}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"执行绑定和渲染"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%89%A7%E8%A1%8C%E7%BB%91%E5%AE%9A%E5%92%8C%E6%B8%B2%E6%9F%93","aria-label":"执行绑定和渲染 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"执行绑定和渲染","position":{"start":{"line":234,"column":5,"offset":7778},"end":{"line":234,"column":12,"offset":7785}}}],"position":{"start":{"line":234,"column":1,"offset":7774},"end":{"line":234,"column":12,"offset":7785}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"有了 graph 实例和 edgeBundling 实例后，我们执行下面代码进行绑定操作和图的数据读入及渲染：","position":{"start":{"line":235,"column":1,"offset":7786},"end":{"line":235,"column":56,"offset":7841}}}],"position":{"start":{"line":235,"column":1,"offset":7786},"end":{"line":235,"column":56,"offset":7841}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">edgeBundling<span class=\"token punctuation\">.</span><span class=\"token function\">bundling</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 执行插件的绑定操作</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">data</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":236,"column":1,"offset":7842},"end":{"line":240,"column":4,"offset":7935}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"设置-tooltip-与交互操作"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E8%AE%BE%E7%BD%AE-tooltip-%E4%B8%8E%E4%BA%A4%E4%BA%92%E6%93%8D%E4%BD%9C","aria-label":"设置 tooltip 与交互操作 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"设置 tooltip 与交互操作","position":{"start":{"line":243,"column":6,"offset":7943},"end":{"line":243,"column":22,"offset":7959}}}],"position":{"start":{"line":243,"column":1,"offset":7938},"end":{"line":243,"column":22,"offset":7959}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"使用 tooltip，可以在鼠标 hover 到节点上时展示该节点的其他属性值。首先在 html 中设定 tooltip 的样式：","position":{"start":{"line":244,"column":1,"offset":7960},"end":{"line":244,"column":66,"offset":8025}}}],"position":{"start":{"line":244,"column":1,"offset":7960},"end":{"line":244,"column":66,"offset":8025}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>style</span><span class=\"token punctuation\">></span></span><span class=\"token style\"><span class=\"token language-css\">\n <span class=\"token selector\">.g6-tooltip</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border</span><span class=\"token punctuation\">:</span> 1px solid #e2e2e2<span class=\"token punctuation\">;</span>\n <span class=\"token property\">border-radius</span><span class=\"token punctuation\">:</span> 4px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">font-size</span><span class=\"token punctuation\">:</span> 12px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> #545454<span class=\"token punctuation\">;</span>\n <span class=\"token property\">background-color</span><span class=\"token punctuation\">:</span> <span class=\"token function\">rgba</span><span class=\"token punctuation\">(</span>255<span class=\"token punctuation\">,</span> 255<span class=\"token punctuation\">,</span> 255<span class=\"token punctuation\">,</span> 0.9<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> 10px 8px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">box-shadow</span><span class=\"token punctuation\">:</span> <span class=\"token function\">rgb</span><span class=\"token punctuation\">(</span>174<span class=\"token punctuation\">,</span> 174<span class=\"token punctuation\">,</span> 174<span class=\"token punctuation\">)</span> 0px 0px 10px<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>style</span><span class=\"token punctuation\">></span></span></code></pre></div>","position":{"start":{"line":245,"column":1,"offset":8026},"end":{"line":257,"column":4,"offset":8290}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"然后，在上一步实例化 ","position":{"start":{"line":259,"column":1,"offset":8292},"end":{"line":259,"column":12,"offset":8303}}},{"type":"raw","value":"<code class=\"language-text\">graph</code>","position":{"start":{"line":259,"column":12,"offset":8303},"end":{"line":259,"column":19,"offset":8310}}},{"type":"text","value":" 时，增加一个名为 ","position":{"start":{"line":259,"column":19,"offset":8310},"end":{"line":259,"column":29,"offset":8320}}},{"type":"raw","value":"<code class=\"language-text\">modes</code>","position":{"start":{"line":259,"column":29,"offset":8320},"end":{"line":259,"column":36,"offset":8327}}},{"type":"text","value":" 的配置项到参数中，如下写法启动了 ","position":{"start":{"line":259,"column":36,"offset":8327},"end":{"line":259,"column":54,"offset":8345}}},{"type":"raw","value":"<code class=\"language-text\">drag-canvas</code>","position":{"start":{"line":259,"column":54,"offset":8345},"end":{"line":259,"column":67,"offset":8358}}},{"type":"text","value":" 画图拖动操作、","position":{"start":{"line":259,"column":67,"offset":8358},"end":{"line":259,"column":75,"offset":8366}}},{"type":"raw","value":"<code class=\"language-text\">zoom-canvas</code>","position":{"start":{"line":259,"column":75,"offset":8366},"end":{"line":259,"column":88,"offset":8379}}},{"type":"text","value":" 画布放缩操作，以及 ","position":{"start":{"line":259,"column":88,"offset":8379},"end":{"line":259,"column":99,"offset":8390}}},{"type":"raw","value":"<code class=\"language-text\">tooltip</code>","position":{"start":{"line":259,"column":99,"offset":8390},"end":{"line":259,"column":108,"offset":8399}}},{"type":"text","value":"，在 ","position":{"start":{"line":259,"column":108,"offset":8399},"end":{"line":259,"column":111,"offset":8402}}},{"type":"raw","value":"<code class=\"language-text\">formatText</code>","position":{"start":{"line":259,"column":111,"offset":8402},"end":{"line":259,"column":123,"offset":8414}}},{"type":"text","value":" 函数中指定了 ","position":{"start":{"line":259,"column":123,"offset":8414},"end":{"line":259,"column":131,"offset":8422}}},{"type":"raw","value":"<code class=\"language-text\">tooltip</code>","position":{"start":{"line":259,"column":131,"offset":8422},"end":{"line":259,"column":140,"offset":8431}}},{"type":"text","value":" 显示的文本内容：","position":{"start":{"line":259,"column":140,"offset":8431},"end":{"line":259,"column":149,"offset":8440}}}],"position":{"start":{"line":259,"column":1,"offset":8292},"end":{"line":259,"column":149,"offset":8440}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"> modes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">default</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span> <span class=\"token string\">'drag-canvas'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'zoom-canvas'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'tooltip'</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">formatText</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">model</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> text <span class=\"token operator\">=</span> <span class=\"token string\">'Longitude: '</span> <span class=\"token operator\">+</span> model<span class=\"token punctuation\">.</span>lon <span class=\"token operator\">+</span> <span class=\"token string\">'\\n Latitude: '</span> <span class=\"token operator\">+</span> model<span class=\"token punctuation\">.</span>lat<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">return</span> text<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token function-variable function\">shouldUpdate</span><span class=\"token punctuation\">:</span> <span class=\"token parameter\">e</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">]</span>\n <span class=\"token punctuation\">}</span></code></pre></div>","position":{"start":{"line":260,"column":1,"offset":8441},"end":{"line":273,"column":4,"offset":8728}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"这样，当鼠标移动到节点上时，带有经纬度信息的 ","position":{"start":{"line":275,"column":1,"offset":8730},"end":{"line":275,"column":24,"offset":8753}}},{"type":"raw","value":"<code class=\"language-text\">tooltip</code>","position":{"start":{"line":275,"column":24,"offset":8753},"end":{"line":275,"column":33,"offset":8762}}},{"type":"text","value":" 将会出现：","position":{"start":{"line":275,"column":33,"offset":8762},"end":{"line":275,"column":39,"offset":8768}}},{"type":"raw","value":"<br />","position":{"start":{"line":275,"column":39,"offset":8768},"end":{"line":275,"column":45,"offset":8774}}},{"type":"element","tagName":"img","properties":{"src":"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"},"children":[],"position":{"start":{"line":275,"column":45,"offset":8774},"end":{"line":275,"column":301,"offset":9030}}}],"position":{"start":{"line":275,"column":1,"offset":8730},"end":{"line":275,"column":301,"offset":9030}}},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"tooltip","position":{"start":{"line":276,"column":3,"offset":9033},"end":{"line":276,"column":10,"offset":9040}}}],"position":{"start":{"line":276,"column":3,"offset":9033},"end":{"line":276,"column":10,"offset":9040}}},{"type":"text","value":"\n"}],"position":{"start":{"line":276,"column":1,"offset":9031},"end":{"line":276,"column":10,"offset":9040}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"同时，可以拖拽和放缩画布：","position":{"start":{"line":279,"column":1,"offset":9043},"end":{"line":279,"column":14,"offset":9056}}},{"type":"element","tagName":"img","properties":{"src":"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"},"children":[],"position":{"start":{"line":279,"column":14,"offset":9056},"end":{"line":279,"column":298,"offset":9340}}}],"position":{"start":{"line":279,"column":1,"offset":9043},"end":{"line":279,"column":298,"offset":9340}}},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"缩放和拖动画布。","position":{"start":{"line":280,"column":3,"offset":9343},"end":{"line":280,"column":11,"offset":9351}}}],"position":{"start":{"line":280,"column":3,"offset":9343},"end":{"line":280,"column":11,"offset":9351}}},{"type":"text","value":"\n"}],"position":{"start":{"line":280,"column":1,"offset":9341},"end":{"line":280,"column":11,"offset":9351}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"分析"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%88%86%E6%9E%90","aria-label":"分析 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"分析","position":{"start":{"line":283,"column":4,"offset":9357},"end":{"line":283,"column":6,"offset":9359}}}],"position":{"start":{"line":283,"column":1,"offset":9354},"end":{"line":283,"column":6,"offset":9359}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"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"},"children":[],"position":{"start":{"line":284,"column":1,"offset":9360},"end":{"line":284,"column":259,"offset":9618}}}],"position":{"start":{"line":284,"column":1,"offset":9360},"end":{"line":284,"column":259,"offset":9618}}},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"最终效果图。节点大小代表飞入及飞出该城市航线总数。节点饼图展示飞出与飞入航线比例统计信息（橙红色为飞入，青色为飞出）。边的渐变色代表航班的飞行方向。起始端：青色；结束端：橙红色。","position":{"start":{"line":285,"column":3,"offset":9621},"end":{"line":285,"column":92,"offset":9710}}}],"position":{"start":{"line":285,"column":3,"offset":9621},"end":{"line":285,"column":92,"offset":9710}}},{"type":"text","value":"\n"}],"position":{"start":{"line":285,"column":1,"offset":9619},"end":{"line":285,"column":92,"offset":9710}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"最后，让我们一起分析如下的最终结果图给我们带来的信息：","position":{"start":{"line":288,"column":1,"offset":9713},"end":{"line":288,"column":28,"offset":9740}}}],"position":{"start":{"line":288,"column":1,"offset":9713},"end":{"line":288,"column":28,"offset":9740}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"大节点主要集中在中偏东部，根据其经纬度，可以推测这些城市有：亚特兰大、纽约、芝加哥、休斯顿、堪萨斯等，这些城市都是美国重要的交通枢纽；","position":{"start":{"line":290,"column":3,"offset":9744},"end":{"line":290,"column":70,"offset":9811}}}],"position":{"start":{"line":290,"column":1,"offset":9742},"end":{"line":290,"column":70,"offset":9811}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"美国东部的线桔红色居多，说明东部城市的飞入航班较多；","position":{"start":{"line":291,"column":3,"offset":9814},"end":{"line":291,"column":29,"offset":9840}}}],"position":{"start":{"line":291,"column":1,"offset":9812},"end":{"line":291,"column":29,"offset":9840}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"相反，西部城市的飞出航班较多；","position":{"start":{"line":292,"column":3,"offset":9843},"end":{"line":292,"column":18,"offset":9858}}}],"position":{"start":{"line":292,"column":1,"offset":9841},"end":{"line":292,"column":18,"offset":9858}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"整体飞行方向从东至西；","position":{"start":{"line":293,"column":3,"offset":9861},"end":{"line":293,"column":14,"offset":9872}}}],"position":{"start":{"line":293,"column":1,"offset":9859},"end":{"line":293,"column":14,"offset":9872}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"东部的航线也较之于西部更加密集、频繁；","position":{"start":{"line":294,"column":3,"offset":9875},"end":{"line":294,"column":22,"offset":9894}}}],"position":{"start":{"line":294,"column":1,"offset":9873},"end":{"line":294,"column":22,"offset":9894}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"西海岸由西雅图和波特兰飞往洛杉矶的航班较多。","position":{"start":{"line":295,"column":3,"offset":9897},"end":{"line":295,"column":25,"offset":9919}}}],"position":{"start":{"line":295,"column":1,"offset":9895},"end":{"line":295,"column":25,"offset":9919}}},{"type":"text","value":"\n"}],"position":{"start":{"line":290,"column":1,"offset":9742},"end":{"line":295,"column":25,"offset":9919}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"上述发现很容易被解释：美国东部是美国的经济、政治集中区域。","position":{"start":{"line":297,"column":1,"offset":9921},"end":{"line":297,"column":30,"offset":9950}}}],"position":{"start":{"line":297,"column":1,"offset":9921},"end":{"line":297,"column":30,"offset":9950}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":299,"column":1,"offset":9952}}}}