@antv/g6/.cache/caches/gatsby-transformer-remark/diskstore-0df33823b6f4a3d7ae786926ddbb0767.json

graph visualization frame work

{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ast-6f70acf3939351b3e76f2960d7d389f8-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"当数据中没有节点位置信息，或者数据中的位置信息不满足需求时，需要借助一些布局算法对图进行布局。G6 提供了 7 种一般图的布局和 4 种树图的布局：","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":75,"offset":75}}},{"type":"raw","value":"<br />","position":{"start":{"line":2,"column":75,"offset":75},"end":{"line":2,"column":81,"offset":81}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"一般图：","position":{"start":{"line":2,"column":83,"offset":83},"end":{"line":2,"column":87,"offset":87}}}],"position":{"start":{"line":2,"column":81,"offset":81},"end":{"line":2,"column":89,"offset":89}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":89,"offset":89}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Random Layout：随机布局；","position":{"start":{"line":4,"column":3,"offset":93},"end":{"line":4,"column":22,"offset":112}}}],"position":{"start":{"line":4,"column":1,"offset":91},"end":{"line":4,"column":22,"offset":112}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Force Layout：经典力导向布局：","position":{"start":{"line":5,"column":5,"offset":117},"end":{"line":5,"column":26,"offset":138}}}],"position":{"start":{"line":5,"column":3,"offset":115},"end":{"line":5,"column":28,"offset":140}}}],"position":{"start":{"line":5,"column":3,"offset":115},"end":{"line":5,"column":28,"offset":140}}},{"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":6,"column":3,"offset":143},"end":{"line":6,"column":97,"offset":237}}}],"position":{"start":{"line":6,"column":3,"offset":143},"end":{"line":6,"column":97,"offset":237}}},{"type":"text","value":"\n"}],"position":{"start":{"line":6,"column":1,"offset":141},"end":{"line":6,"column":97,"offset":237}}},{"type":"text","value":"\n"}],"position":{"start":{"line":5,"column":1,"offset":113},"end":{"line":7,"column":1,"offset":238}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Circular Layout：环形布局；","position":{"start":{"line":8,"column":3,"offset":241},"end":{"line":8,"column":24,"offset":262}}}],"position":{"start":{"line":8,"column":1,"offset":239},"end":{"line":8,"column":24,"offset":262}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Radial Layout：辐射状布局；","position":{"start":{"line":9,"column":3,"offset":265},"end":{"line":9,"column":23,"offset":285}}}],"position":{"start":{"line":9,"column":1,"offset":263},"end":{"line":9,"column":23,"offset":285}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"MDS Layout：高维数据降维算法布局；","position":{"start":{"line":10,"column":3,"offset":288},"end":{"line":10,"column":25,"offset":310}}}],"position":{"start":{"line":10,"column":1,"offset":286},"end":{"line":10,"column":25,"offset":310}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Fruchterman Layout：Fruchterman 布局，一种力导布局；","position":{"start":{"line":11,"column":3,"offset":313},"end":{"line":11,"column":44,"offset":354}}}],"position":{"start":{"line":11,"column":1,"offset":311},"end":{"line":11,"column":44,"offset":354}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Dagre Layout：层次布局。","position":{"start":{"line":12,"column":3,"offset":357},"end":{"line":12,"column":21,"offset":375}}}],"position":{"start":{"line":12,"column":1,"offset":355},"end":{"line":12,"column":21,"offset":375}}},{"type":"text","value":"\n"}],"position":{"start":{"line":4,"column":1,"offset":91},"end":{"line":12,"column":21,"offset":375}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"树图布局：","position":{"start":{"line":14,"column":3,"offset":379},"end":{"line":14,"column":8,"offset":384}}}],"position":{"start":{"line":14,"column":1,"offset":377},"end":{"line":14,"column":10,"offset":386}}}],"position":{"start":{"line":14,"column":1,"offset":377},"end":{"line":14,"column":10,"offset":386}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Dendrogram Layout：树状布局（叶子节点布局对齐到同一层）；","position":{"start":{"line":16,"column":3,"offset":390},"end":{"line":16,"column":40,"offset":427}}}],"position":{"start":{"line":16,"column":1,"offset":388},"end":{"line":16,"column":40,"offset":427}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"CompactBox Layout：紧凑树布局；","position":{"start":{"line":17,"column":3,"offset":430},"end":{"line":17,"column":27,"offset":454}}}],"position":{"start":{"line":17,"column":1,"offset":428},"end":{"line":17,"column":27,"offset":454}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Mindmap Layout：脑图布局；","position":{"start":{"line":18,"column":3,"offset":457},"end":{"line":18,"column":23,"offset":477}}}],"position":{"start":{"line":18,"column":1,"offset":455},"end":{"line":18,"column":23,"offset":477}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Intended Layout：缩进布局。","position":{"start":{"line":19,"column":3,"offset":480},"end":{"line":19,"column":24,"offset":501}}}],"position":{"start":{"line":19,"column":1,"offset":478},"end":{"line":19,"column":24,"offset":501}}},{"type":"text","value":"\n"}],"position":{"start":{"line":16,"column":1,"offset":388},"end":{"line":19,"column":24,"offset":501}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"各种布局方法的具体介绍及其配置参见 ","position":{"start":{"line":21,"column":1,"offset":503},"end":{"line":21,"column":19,"offset":521}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/agbmu2","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Layout API","position":{"start":{"line":21,"column":20,"offset":522},"end":{"line":21,"column":30,"offset":532}}}],"position":{"start":{"line":21,"column":19,"offset":521},"end":{"line":21,"column":69,"offset":571}}},{"type":"text","value":"。本教程中，我们使用的是力导向布局 (Force Layout)。","position":{"start":{"line":21,"column":69,"offset":571},"end":{"line":21,"column":102,"offset":604}}},{"type":"raw","value":"<br />","position":{"start":{"line":21,"column":102,"offset":604},"end":{"line":21,"column":108,"offset":610}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/156681/1569834329341-f0c218c5-b9b7-4972-8426-2c0c750d2a00.png#align=left&display=inline&height=276&name=image.png&originHeight=720&originWidth=716&search=&size=288617&status=done&width=274","alt":"image.png"},"children":[],"position":{"start":{"line":21,"column":108,"offset":610},"end":{"line":21,"column":349,"offset":851}}}],"position":{"start":{"line":21,"column":1,"offset":503},"end":{"line":21,"column":349,"offset":851}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"取消自动适配画布"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%8F%96%E6%B6%88%E8%87%AA%E5%8A%A8%E9%80%82%E9%85%8D%E7%94%BB%E5%B8%83","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":23,"column":4,"offset":856},"end":{"line":23,"column":12,"offset":864}}}],"position":{"start":{"line":23,"column":1,"offset":853},"end":{"line":23,"column":12,"offset":864}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"我们在之前的教程里面，为了能够将超出画布的图适配到视野中，在实例化图时使用了 ","position":{"start":{"line":24,"column":1,"offset":865},"end":{"line":24,"column":40,"offset":904}}},{"type":"raw","value":"<code class=\"language-text\">fitView</code>","position":{"start":{"line":24,"column":40,"offset":904},"end":{"line":24,"column":49,"offset":913}}},{"type":"text","value":" 配置项。这节开始我们将会去掉这个特性。因为复杂的布局系统会打破适配的规则，反而会造成更多的困扰。让我们将相关的适配代码变为注释：","position":{"start":{"line":24,"column":49,"offset":913},"end":{"line":24,"column":114,"offset":978}}}],"position":{"start":{"line":24,"column":1,"offset":865},"end":{"line":24,"column":114,"offset":978}}},{"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> 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  <span class=\"token comment\">// ...</span>\n  <span class=\"token comment\">// fitView: true,</span>\n  <span class=\"token comment\">// fitViewPadding: [ 20, 40, 50, 20 ]</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":25,"column":1,"offset":979},"end":{"line":31,"column":4,"offset":1098}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"默认布局"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%BB%98%E8%AE%A4%E5%B8%83%E5%B1%80","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":33,"column":4,"offset":1103},"end":{"line":33,"column":8,"offset":1107}}}],"position":{"start":{"line":33,"column":1,"offset":1100},"end":{"line":33,"column":8,"offset":1107}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"当实例化图时没有配置布局时：","position":{"start":{"line":34,"column":1,"offset":1108},"end":{"line":34,"column":15,"offset":1122}}}],"position":{"start":{"line":34,"column":1,"offset":1108},"end":{"line":34,"column":15,"offset":1122}}},{"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":36,"column":3,"offset":1126},"end":{"line":36,"column":15,"offset":1138}}},{"type":"raw","value":"<code class=\"language-text\">x</code>","position":{"start":{"line":36,"column":15,"offset":1138},"end":{"line":36,"column":18,"offset":1141}}},{"type":"text","value":" 和 ","position":{"start":{"line":36,"column":18,"offset":1141},"end":{"line":36,"column":21,"offset":1144}}},{"type":"raw","value":"<code class=\"language-text\">y</code>","position":{"start":{"line":36,"column":21,"offset":1144},"end":{"line":36,"column":24,"offset":1147}}},{"type":"text","value":"），则按照数据的位置信息进行绘制；","position":{"start":{"line":36,"column":24,"offset":1147},"end":{"line":36,"column":41,"offset":1164}}}],"position":{"start":{"line":36,"column":1,"offset":1124},"end":{"line":36,"column":41,"offset":1164}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"若数据中节点没有位置信息，则默认使用 Random Layout 进行布局。","position":{"start":{"line":37,"column":3,"offset":1167},"end":{"line":37,"column":41,"offset":1205}}}],"position":{"start":{"line":37,"column":1,"offset":1165},"end":{"line":37,"column":41,"offset":1205}}},{"type":"text","value":"\n"}],"position":{"start":{"line":36,"column":1,"offset":1124},"end":{"line":37,"column":41,"offset":1205}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"配置布局"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%85%8D%E7%BD%AE%E5%B8%83%E5%B1%80","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":39,"column":4,"offset":1210},"end":{"line":39,"column":8,"offset":1214}}}],"position":{"start":{"line":39,"column":1,"offset":1207},"end":{"line":39,"column":8,"offset":1214}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"G6 使用布局的方式非常简单，在图实例化的时候，加上 layout 配置即可。下面代码在实例化图时设置了布局方法为 ","position":{"start":{"line":40,"column":1,"offset":1215},"end":{"line":40,"column":59,"offset":1273}}},{"type":"raw","value":"<code class=\"language-text\">type: &#39;force&#39;</code>","position":{"start":{"line":40,"column":59,"offset":1273},"end":{"line":40,"column":74,"offset":1288}}},{"type":"text","value":"，即经典力导向图布局。并设置了参数 ","position":{"start":{"line":40,"column":74,"offset":1288},"end":{"line":40,"column":92,"offset":1306}}},{"type":"raw","value":"<code class=\"language-text\">preventOverlap: true</code>","position":{"start":{"line":40,"column":92,"offset":1306},"end":{"line":40,"column":114,"offset":1328}}},{"type":"text","value":" ，表示希望节点不重叠。力导向布局的更多配置项参见：","position":{"start":{"line":40,"column":114,"offset":1328},"end":{"line":40,"column":140,"offset":1354}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/agbmu2","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Layout API","position":{"start":{"line":40,"column":141,"offset":1355},"end":{"line":40,"column":151,"offset":1365}}}],"position":{"start":{"line":40,"column":140,"offset":1354},"end":{"line":40,"column":190,"offset":1404}}},{"type":"text","value":"。","position":{"start":{"line":40,"column":190,"offset":1404},"end":{"line":40,"column":191,"offset":1405}}}],"position":{"start":{"line":40,"column":1,"offset":1215},"end":{"line":40,"column":191,"offset":1405}}},{"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> 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  <span class=\"token operator\">...</span>                      <span class=\"token comment\">// 其他配置项</span>\n  layout<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>                <span class=\"token comment\">// Object，可选，布局的方法及其配置项，默认为 random 布局。</span>\n    type<span class=\"token punctuation\">:</span> <span class=\"token string\">'force'</span><span class=\"token punctuation\">,</span>         <span class=\"token comment\">// 指定为力导向布局</span>\n    preventOverlap<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>  <span class=\"token comment\">// 防止节点重叠</span>\n    <span class=\"token comment\">// nodeSize: 30        // 节点大小，用于算法中防止节点重叠时的碰撞检测。由于已经在上一节的元素配置中设置了每个节点的 size 属性，则不需要在此设置 nodeSize。</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>","position":{"start":{"line":41,"column":1,"offset":1406},"end":{"line":50,"column":4,"offset":1741}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"结果如下：","position":{"start":{"line":52,"column":1,"offset":1743},"end":{"line":52,"column":6,"offset":1748}}},{"type":"raw","value":"<br />","position":{"start":{"line":52,"column":6,"offset":1748},"end":{"line":52,"column":12,"offset":1754}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/156681/1571054535576-5ba50c13-a953-4c49-ba66-8e117deb00e7.png#align=left&display=inline&height=234&name=image.png&originHeight=234&originWidth=304&search=&size=31999&status=done&width=304","alt":"image.png"},"children":[],"position":{"start":{"line":52,"column":12,"offset":1754},"end":{"line":52,"column":252,"offset":1994}}}],"position":{"start":{"line":52,"column":1,"offset":1743},"end":{"line":52,"column":252,"offset":1994}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"如图所示，节点按照力导向布局自动平衡。但是图中的节点过于拥挤，边上的文字信息被挤占，无法看清。我们希望布局计算边的距离可以更长一些。G6 的力导向布局提供了 ","position":{"start":{"line":54,"column":1,"offset":1996},"end":{"line":54,"column":80,"offset":2075}}},{"type":"raw","value":"<code class=\"language-text\">linkDistance</code>","position":{"start":{"line":54,"column":80,"offset":2075},"end":{"line":54,"column":94,"offset":2089}}},{"type":"text","value":" 属性用来指定布局的时候边的距离长度：","position":{"start":{"line":54,"column":94,"offset":2089},"end":{"line":54,"column":113,"offset":2108}}}],"position":{"start":{"line":54,"column":1,"offset":1996},"end":{"line":54,"column":113,"offset":2108}}},{"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> 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  <span class=\"token comment\">// ...</span>\n  layout<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n    type<span class=\"token punctuation\">:</span> <span class=\"token string\">'force'</span><span class=\"token punctuation\">,</span>\n    preventOverlap<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n    linkDistance<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 指定边距离为100</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":55,"column":1,"offset":2109},"end":{"line":64,"column":4,"offset":2264}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"结果如下：","position":{"start":{"line":66,"column":1,"offset":2266},"end":{"line":66,"column":6,"offset":2271}}},{"type":"raw","value":"<br />","position":{"start":{"line":66,"column":6,"offset":2271},"end":{"line":66,"column":12,"offset":2277}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/156681/1571054559628-2a7abff9-1921-41d8-b32f-2704f43db1a0.png#align=left&display=inline&height=335&name=image.png&originHeight=335&originWidth=389&search=&size=46496&status=done&width=389","alt":"image.png"},"children":[],"position":{"start":{"line":66,"column":12,"offset":2277},"end":{"line":66,"column":252,"offset":2517}}}],"position":{"start":{"line":66,"column":1,"offset":2266},"end":{"line":66,"column":252,"offset":2517}}},{"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":67,"column":3,"offset":2520},"end":{"line":67,"column":33,"offset":2550}}},{"type":"element","tagName":"a","properties":{"href":"../middle/layout"},"children":[{"type":"text","value":"布局切换","position":{"start":{"line":67,"column":34,"offset":2551},"end":{"line":67,"column":38,"offset":2555}}}],"position":{"start":{"line":67,"column":33,"offset":2550},"end":{"line":67,"column":57,"offset":2574}}},{"type":"text","value":"。","position":{"start":{"line":67,"column":57,"offset":2574},"end":{"line":67,"column":58,"offset":2575}}}],"position":{"start":{"line":67,"column":3,"offset":2520},"end":{"line":67,"column":58,"offset":2575}}},{"type":"text","value":"\n"}],"position":{"start":{"line":67,"column":1,"offset":2518},"end":{"line":67,"column":58,"offset":2575}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" 提示 ","position":{"start":{"line":70,"column":1,"offset":2578},"end":{"line":70,"column":5,"offset":2582}}},{"type":"raw","value":"<br />","position":{"start":{"line":70,"column":5,"offset":2582},"end":{"line":70,"column":11,"offset":2588}}},{"type":"text","value":"布局将在调用 ","position":{"start":{"line":70,"column":11,"offset":2588},"end":{"line":70,"column":18,"offset":2595}}},{"type":"raw","value":"<code class=\"language-text\">graph.render()</code>","position":{"start":{"line":70,"column":18,"offset":2595},"end":{"line":70,"column":34,"offset":2611}}},{"type":"text","value":" 时执行计算。","position":{"start":{"line":70,"column":34,"offset":2611},"end":{"line":70,"column":41,"offset":2618}}}],"position":{"start":{"line":70,"column":1,"offset":2578},"end":{"line":70,"column":41,"offset":2618}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"完整代码"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81","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":72,"column":4,"offset":2623},"end":{"line":72,"column":8,"offset":2627}}}],"position":{"start":{"line":72,"column":1,"offset":2620},"end":{"line":72,"column":8,"offset":2627}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"至此，完整代码如下：","position":{"start":{"line":73,"column":1,"offset":2628},"end":{"line":73,"column":11,"offset":2638}}}],"position":{"start":{"line":73,"column":1,"offset":2628},"end":{"line":73,"column":11,"offset":2638}}},{"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 doctype\">&lt;!DOCTYPE html></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>head</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>title</span><span class=\"token punctuation\">></span></span>Tutorial Demo<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>title</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>head</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>body</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>mountNode<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\">\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\">800</span><span class=\"token punctuation\">,</span>\n    height<span class=\"token punctuation\">:</span> <span class=\"token number\">600</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\">30</span><span class=\"token punctuation\">,</span>\n      labelCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n        style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n          fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'#fff'</span>\n        <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    defaultEdge<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n      labelCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n        autoRotate<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    layout<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n      type<span class=\"token punctuation\">:</span> <span class=\"token string\">'force'</span><span class=\"token punctuation\">,</span>            <span class=\"token comment\">// 设置布局算法为 force</span>\n      linkDistance<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span>        <span class=\"token comment\">// 设置边长为 100</span>\n      preventOverlap<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>     <span class=\"token comment\">// 设置防止重叠</span>\n    <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> <span class=\"token function-variable function\">main</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">async</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">const</span> response <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span>\n      <span class=\"token string\">'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'</span>\n    <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">const</span> remoteData <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> response<span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    \n    <span class=\"token keyword\">const</span> nodes <span class=\"token operator\">=</span> remoteData<span class=\"token punctuation\">.</span>nodes<span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">const</span> edges <span class=\"token operator\">=</span> remoteData<span class=\"token punctuation\">.</span>edges<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\">node</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span>node<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        node<span class=\"token punctuation\">.</span>style <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span>\n      node<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>lineWidth <span class=\"token operator\">=</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n      node<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>stroke <span class=\"token operator\">=</span> <span class=\"token string\">'#666'</span><span class=\"token punctuation\">;</span>\n      node<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>fill <span class=\"token operator\">=</span> <span class=\"token string\">'steelblue'</span><span class=\"token punctuation\">;</span>\n      <span class=\"token keyword\">switch</span> <span class=\"token punctuation\">(</span>node<span class=\"token punctuation\">.</span>class<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">case</span> <span class=\"token string\">'c0'</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n          node<span class=\"token punctuation\">.</span>shape <span class=\"token operator\">=</span> <span class=\"token string\">'circle'</span><span class=\"token punctuation\">;</span>\n          <span class=\"token keyword\">break</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n        <span class=\"token keyword\">case</span> <span class=\"token string\">'c1'</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n          node<span class=\"token punctuation\">.</span>shape <span class=\"token operator\">=</span> <span class=\"token string\">'rect'</span><span class=\"token punctuation\">;</span>\n          node<span class=\"token punctuation\">.</span>size <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span> <span class=\"token number\">35</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\">break</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n        <span class=\"token keyword\">case</span> <span class=\"token string\">'c2'</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n          node<span class=\"token punctuation\">.</span>shape <span class=\"token operator\">=</span> <span class=\"token string\">'ellipse'</span><span class=\"token punctuation\">;</span>\n          node<span class=\"token punctuation\">.</span>size <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span> <span class=\"token number\">35</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\">break</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    edges<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">edge</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span>edge<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        edge<span class=\"token punctuation\">.</span>style <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span>\n      edge<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>lineWidth <span class=\"token operator\">=</span> edge<span class=\"token punctuation\">.</span>weight<span class=\"token punctuation\">;</span>\n      edge<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>opacity <span class=\"token operator\">=</span> <span class=\"token number\">0.6</span><span class=\"token punctuation\">;</span>\n      edge<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>stroke <span class=\"token operator\">=</span> <span class=\"token string\">'grey'</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    graph<span class=\"token punctuation\">.</span><span class=\"token function\">data</span><span class=\"token punctuation\">(</span>remoteData<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    graph<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  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n  <span class=\"token function\">main</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>body</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>html</span><span class=\"token punctuation\">></span></span></code></pre></div>","position":{"start":{"line":74,"column":1,"offset":2639},"end":{"line":156,"column":4,"offset":4462}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" ","position":{"start":{"line":158,"column":1,"offset":4464},"end":{"line":158,"column":2,"offset":4465}}},{"type":"raw","value":"<code class=\"language-text\">注意</code>","position":{"start":{"line":158,"column":2,"offset":4465},"end":{"line":158,"column":6,"offset":4469}}},{"type":"text","value":" ","position":{"start":{"line":158,"column":6,"offset":4469},"end":{"line":158,"column":7,"offset":4470}}},{"type":"raw","value":"<br />","position":{"start":{"line":158,"column":7,"offset":4470},"end":{"line":158,"column":13,"offset":4476}}},{"type":"text","value":"若需更换数据，请替换 ","position":{"start":{"line":158,"column":13,"offset":4476},"end":{"line":158,"column":24,"offset":4487}}},{"type":"raw","value":"<code class=\"language-text\">&#39;https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json&#39;</code>","position":{"start":{"line":158,"column":24,"offset":4487},"end":{"line":158,"column":115,"offset":4578}}},{"type":"text","value":" 为新的数据文件地址。","position":{"start":{"line":158,"column":115,"offset":4578},"end":{"line":158,"column":126,"offset":4589}}}],"position":{"start":{"line":158,"column":1,"offset":4464},"end":{"line":158,"column":126,"offset":4589}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":160,"column":1,"offset":4591}}}}