@antv/g6
Version:
graph visualization frame work
1 lines • 62.2 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-ast-7388a1e45496f11d0958f69146dfaec1-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"G6 提供了一般图和树图的一些常用布局，使用方式参见：中级教程 ","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":33,"offset":33},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/qopkkg","children":[{"type":"text","value":"使用布局 Layout","position":{"start":{"line":2,"column":34,"offset":34},"end":{"line":2,"column":45,"offset":45},"indent":[]}}],"position":{"start":{"line":2,"column":33,"offset":33},"end":{"line":2,"column":84,"offset":84},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"，","position":{"start":{"line":2,"column":84,"offset":84},"end":{"line":2,"column":85,"offset":85},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/agbmu2","children":[{"type":"text","value":"Layout API","position":{"start":{"line":2,"column":86,"offset":86},"end":{"line":2,"column":96,"offset":96},"indent":[]}}],"position":{"start":{"line":2,"column":85,"offset":85},"end":{"line":2,"column":135,"offset":135},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"。当这些内置布局无法满足需求时，G6 还提供了一般图的自定义布局的机制，方便用户进行更定制化的扩展。","position":{"start":{"line":2,"column":135,"offset":135},"end":{"line":2,"column":185,"offset":185},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":185,"offset":185},"indent":[]}},{"type":"paragraph","children":[{"type":"html","value":"<span style=\"background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)\">","position":{"start":{"line":4,"column":1,"offset":187},"end":{"line":4,"column":77,"offset":263},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":4,"column":77,"offset":263},"end":{"line":4,"column":78,"offset":264},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":4,"column":78,"offset":264},"end":{"line":4,"column":84,"offset":270},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":4,"column":84,"offset":270},"end":{"line":4,"column":90,"offset":276},"indent":[]}},{"type":"text","value":"注意：","position":{"start":{"line":4,"column":90,"offset":276},"end":{"line":4,"column":93,"offset":279},"indent":[]}},{"type":"html","value":"</span>","position":{"start":{"line":4,"column":93,"offset":279},"end":{"line":4,"column":100,"offset":286},"indent":[]}},{"type":"text","value":"\n树图暂时不支持自定义布局。","position":{"start":{"line":4,"column":100,"offset":286},"end":{"line":5,"column":14,"offset":300},"indent":[1]}}],"position":{"start":{"line":4,"column":1,"offset":187},"end":{"line":5,"column":14,"offset":300},"indent":[1]}},{"type":"paragraph","children":[{"type":"text","value":"本文将会通过自定义 Bigraph 布局的例子讲解自定义布局。","position":{"start":{"line":7,"column":1,"offset":302},"end":{"line":7,"column":32,"offset":333},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":302},"end":{"line":7,"column":32,"offset":333},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#自定义布局-api","title":null,"children":[],"data":{"hProperties":{"aria-label":"自定义布局 api permalink","class":"anchor"},"hChildren":[{"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":"自定义布局 API","position":{"start":{"line":10,"column":4,"offset":339},"end":{"line":10,"column":13,"offset":348},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":336},"end":{"line":10,"column":13,"offset":348},"indent":[]},"data":{"id":"自定义布局-api","htmlAttributes":{"id":"自定义布局-api"},"hProperties":{"id":"自定义布局-api"}}},{"type":"paragraph","children":[{"type":"text","value":"G6 中自定义布局的 API 如下：","position":{"start":{"line":11,"column":1,"offset":349},"end":{"line":11,"column":19,"offset":367},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":349},"end":{"line":11,"column":19,"offset":367},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">/**\n * 注册布局的方法\n * @param {string} type 布局类型，外部引用指定必须，不要与已有布局类型重名\n * @param {object} layout 布局方法\n */</span>\nLayout<span class=\"token punctuation\">.</span><span class=\"token function-variable function\">registerLayout</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span>type<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">/**\n * 定义自定义行为的默认参数，会与用户传入的参数进行合并\n */</span>\n <span class=\"token function\">getDefaultCfg</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</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 comment\">/**\n * 初始化\n * @param {object} data 数据\n */</span>\n <span class=\"token function\">init</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">data</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">/**\n * 执行布局\n */</span>\n <span class=\"token function\">execute</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">/**\n * 根据传入的数据进行布局\n * @param {object} data 数据\n */</span>\n <span class=\"token function\">layout</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">data</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">/**\n * 更新布局配置，但不执行布局\n * @param {object} cfg 需要更新的配置项\n */</span>\n <span class=\"token function\">updateCfg</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">/**\n * 销毁\n */</span>\n <span class=\"token function\">destroy</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</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><span class=\"token punctuation\">;</span></code></pre></div>","position":{"start":{"line":12,"column":1,"offset":368},"end":{"line":49,"column":4,"offset":918},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#自定义布局","title":null,"children":[],"data":{"hProperties":{"aria-label":"自定义布局 permalink","class":"anchor"},"hChildren":[{"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":52,"column":4,"offset":924},"end":{"line":52,"column":9,"offset":929},"indent":[]}}],"position":{"start":{"line":52,"column":1,"offset":921},"end":{"line":52,"column":9,"offset":929},"indent":[]},"data":{"id":"自定义布局","htmlAttributes":{"id":"自定义布局"},"hProperties":{"id":"自定义布局"}}},{"type":"paragraph","children":[{"type":"text","value":"下面，我们将讲解如何自定义布局如下图的二分图 Bigraph。二分图只存在两部分节点之间的边，同属于一个部分的节点之间没有边。我们希望布局能够对两部分节点分别进行排序，减少边的交叉。","position":{"start":{"line":53,"column":1,"offset":930},"end":{"line":53,"column":92,"offset":1021},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":53,"column":92,"offset":1021},"end":{"line":53,"column":98,"offset":1027},"indent":[]}}],"position":{"start":{"line":53,"column":1,"offset":930},"end":{"line":53,"column":98,"offset":1027},"indent":[]}},{"type":"html","value":"<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*FksvTrdkqXgAAAAAAAAAAABkARQnAQ' alt='img' width='350'/>","position":{"start":{"line":55,"column":1,"offset":1029},"end":{"line":55,"column":121,"offset":1149},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"该二分图数据如下，节点根据 ","position":{"start":{"line":57,"column":1,"offset":1151},"end":{"line":57,"column":15,"offset":1165},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">cluster</code>","position":{"start":{"line":57,"column":15,"offset":1165},"end":{"line":57,"column":24,"offset":1174},"indent":[]}},{"type":"text","value":" 字段分为 了 ","position":{"start":{"line":57,"column":24,"offset":1174},"end":{"line":57,"column":32,"offset":1182},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'part1'</code>","position":{"start":{"line":57,"column":32,"offset":1182},"end":{"line":57,"column":41,"offset":1191},"indent":[]}},{"type":"text","value":" 和 ","position":{"start":{"line":57,"column":41,"offset":1191},"end":{"line":57,"column":44,"offset":1194},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'part2'</code>","position":{"start":{"line":57,"column":44,"offset":1194},"end":{"line":57,"column":53,"offset":1203},"indent":[]}},{"type":"text","value":"，代表二分图的两部分。","position":{"start":{"line":57,"column":53,"offset":1203},"end":{"line":57,"column":64,"offset":1214},"indent":[]}}],"position":{"start":{"line":57,"column":1,"offset":1151},"end":{"line":57,"column":64,"offset":1214},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n nodes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">{</span> id<span class=\"token punctuation\">:</span> <span class=\"token string\">'0'</span><span class=\"token punctuation\">,</span> label<span class=\"token punctuation\">:</span> <span class=\"token string\">'A'</span><span class=\"token punctuation\">,</span> cluster<span class=\"token punctuation\">:</span> <span class=\"token string\">'part1'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> id<span class=\"token punctuation\">:</span> <span class=\"token string\">'1'</span><span class=\"token punctuation\">,</span> label<span class=\"token punctuation\">:</span> <span class=\"token string\">'B'</span><span class=\"token punctuation\">,</span> cluster<span class=\"token punctuation\">:</span> <span class=\"token string\">'part1'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> id<span class=\"token punctuation\">:</span> <span class=\"token string\">'2'</span><span class=\"token punctuation\">,</span> label<span class=\"token punctuation\">:</span> <span class=\"token string\">'C'</span><span class=\"token punctuation\">,</span> cluster<span class=\"token punctuation\">:</span> <span class=\"token string\">'part1'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> id<span class=\"token punctuation\">:</span> <span class=\"token string\">'3'</span><span class=\"token punctuation\">,</span> label<span class=\"token punctuation\">:</span> <span class=\"token string\">'D'</span><span class=\"token punctuation\">,</span> cluster<span class=\"token punctuation\">:</span> <span class=\"token string\">'part1'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> id<span class=\"token punctuation\">:</span> <span class=\"token string\">'4'</span><span class=\"token punctuation\">,</span> label<span class=\"token punctuation\">:</span> <span class=\"token string\">'E'</span><span class=\"token punctuation\">,</span> cluster<span class=\"token punctuation\">:</span> <span class=\"token string\">'part1'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> id<span class=\"token punctuation\">:</span> <span class=\"token string\">'5'</span><span class=\"token punctuation\">,</span> label<span class=\"token punctuation\">:</span> <span class=\"token string\">'F'</span><span class=\"token punctuation\">,</span> cluster<span class=\"token punctuation\">:</span> <span class=\"token string\">'part1'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> id<span class=\"token punctuation\">:</span> <span class=\"token string\">'6'</span><span class=\"token punctuation\">,</span> label<span class=\"token punctuation\">:</span> <span class=\"token string\">'a'</span><span class=\"token punctuation\">,</span> cluster<span class=\"token punctuation\">:</span> <span class=\"token string\">'part2'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> id<span class=\"token punctuation\">:</span> <span class=\"token string\">'7'</span><span class=\"token punctuation\">,</span> label<span class=\"token punctuation\">:</span> <span class=\"token string\">'b'</span><span class=\"token punctuation\">,</span> cluster<span class=\"token punctuation\">:</span> <span class=\"token string\">'part2'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> id<span class=\"token punctuation\">:</span> <span class=\"token string\">'8'</span><span class=\"token punctuation\">,</span> label<span class=\"token punctuation\">:</span> <span class=\"token string\">'c'</span><span class=\"token punctuation\">,</span> cluster<span class=\"token punctuation\">:</span> <span class=\"token string\">'part2'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> id<span class=\"token punctuation\">:</span> <span class=\"token string\">'9'</span><span class=\"token punctuation\">,</span> label<span class=\"token punctuation\">:</span> <span class=\"token string\">'d'</span><span class=\"token punctuation\">,</span> cluster<span class=\"token punctuation\">:</span> <span class=\"token string\">'part2'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n edges<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'0'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'6'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'0'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'7'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'0'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'9'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'1'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'6'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'1'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'9'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'1'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'7'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'2'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'8'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'2'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'9'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'2'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'6'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'3'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'8'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'4'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'6'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'4'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'7'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'5'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'9'</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 punctuation\">}</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":58,"column":1,"offset":1215},"end":{"line":88,"column":4,"offset":2193},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#需求分析","title":null,"children":[],"data":{"hProperties":{"aria-label":"需求分析 permalink","class":"anchor"},"hChildren":[{"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":90,"column":5,"offset":2199},"end":{"line":90,"column":9,"offset":2203},"indent":[]}}],"position":{"start":{"line":90,"column":1,"offset":2195},"end":{"line":90,"column":9,"offset":2203},"indent":[]},"data":{"id":"需求分析","htmlAttributes":{"id":"需求分析"},"hProperties":{"id":"需求分析"}}},{"type":"paragraph","children":[{"type":"text","value":"为了减少边的交叉，可以通过排序，将 ","position":{"start":{"line":91,"column":1,"offset":2204},"end":{"line":91,"column":19,"offset":2222},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'part1'</code>","position":{"start":{"line":91,"column":19,"offset":2222},"end":{"line":91,"column":28,"offset":2231},"indent":[]}},{"type":"text","value":" 的节点 A 对齐到所有与 A 相连的 ","position":{"start":{"line":91,"column":28,"offset":2231},"end":{"line":91,"column":48,"offset":2251},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'part2'</code>","position":{"start":{"line":91,"column":48,"offset":2251},"end":{"line":91,"column":57,"offset":2260},"indent":[]}},{"type":"text","value":" 中的节点的平均中心；同样将 ","position":{"start":{"line":91,"column":57,"offset":2260},"end":{"line":91,"column":72,"offset":2275},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'part2'</code>","position":{"start":{"line":91,"column":72,"offset":2275},"end":{"line":91,"column":81,"offset":2284},"indent":[]}},{"type":"text","value":" 中的节点 a 对齐到所有与 a 相连的 ","position":{"start":{"line":91,"column":81,"offset":2284},"end":{"line":91,"column":102,"offset":2305},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'part1'</code>","position":{"start":{"line":91,"column":102,"offset":2305},"end":{"line":91,"column":111,"offset":2314},"indent":[]}},{"type":"text","value":" 中的节点的平均中心。可以描述成如下过程：","position":{"start":{"line":91,"column":111,"offset":2314},"end":{"line":91,"column":132,"offset":2335},"indent":[]}}],"position":{"start":{"line":91,"column":1,"offset":2204},"end":{"line":91,"column":132,"offset":2335},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"Step 1：为 ","position":{"start":{"line":93,"column":3,"offset":2339},"end":{"line":93,"column":12,"offset":2348},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'part1'</code>","position":{"start":{"line":93,"column":12,"offset":2348},"end":{"line":93,"column":21,"offset":2357},"indent":[]}},{"type":"text","value":" 和 ","position":{"start":{"line":93,"column":21,"offset":2357},"end":{"line":93,"column":24,"offset":2360},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'part2'</code>","position":{"start":{"line":93,"column":24,"offset":2360},"end":{"line":93,"column":33,"offset":2369},"indent":[]}},{"type":"text","value":" 的节点初始化随机序号 index，都分别从 0 开始；","position":{"start":{"line":93,"column":33,"offset":2369},"end":{"line":93,"column":61,"offset":2397},"indent":[]}}],"position":{"start":{"line":93,"column":3,"offset":2339},"end":{"line":93,"column":61,"offset":2397},"indent":[]}}],"position":{"start":{"line":93,"column":1,"offset":2337},"end":{"line":93,"column":61,"offset":2397},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"Step 2：遍历 ","position":{"start":{"line":94,"column":3,"offset":2400},"end":{"line":94,"column":13,"offset":2410},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'part1'</code>","position":{"start":{"line":94,"column":13,"offset":2410},"end":{"line":94,"column":22,"offset":2419},"indent":[]}},{"type":"text","value":" 的节点，对每一个节点 A：","position":{"start":{"line":94,"column":22,"offset":2419},"end":{"line":94,"column":36,"offset":2433},"indent":[]}}],"position":{"start":{"line":94,"column":3,"offset":2400},"end":{"line":94,"column":36,"offset":2433},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"找到与 A 相连的属于 ","position":{"start":{"line":95,"column":5,"offset":2438},"end":{"line":95,"column":17,"offset":2450},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'part2'</code>","position":{"start":{"line":95,"column":17,"offset":2450},"end":{"line":95,"column":26,"offset":2459},"indent":[]}},{"type":"text","value":" 的节点的集合 ","position":{"start":{"line":95,"column":26,"offset":2459},"end":{"line":95,"column":34,"offset":2467},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/__latex/f6dc1bad88be668c4ac817b367ec9bbf.svg#card=math&code=set_A%0A&height=16&width=32","alt":null,"position":{"start":{"line":95,"column":34,"offset":2467},"end":{"line":95,"column":154,"offset":2587},"indent":[]}},{"type":"text","value":"，加和 ","position":{"start":{"line":95,"column":154,"offset":2587},"end":{"line":95,"column":158,"offset":2591},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/__latex/f6dc1bad88be668c4ac817b367ec9bbf.svg#card=math&code=set_A%0A&height=16&width=32","alt":null,"position":{"start":{"line":95,"column":158,"offset":2591},"end":{"line":95,"column":278,"offset":2711},"indent":[]}},{"type":"text","value":" 中所有节点的 index，并除以 ","position":{"start":{"line":95,"column":278,"offset":2711},"end":{"line":95,"column":296,"offset":2729},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/__latex/f6dc1bad88be668c4ac817b367ec9bbf.svg#card=math&code=set_A%0A&height=16&width=32","alt":null,"position":{"start":{"line":95,"column":296,"offset":2729},"end":{"line":95,"column":416,"offset":2849},"indent":[]}},{"type":"text","value":" 的元素个数，得数覆盖 A 的 index 值：","position":{"start":{"line":95,"column":416,"offset":2849},"end":{"line":95,"column":440,"offset":2873},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/__latex/b2acdd6a9423b18105b6909ef4124618.svg#card=math&code=A.index%20%3D%20%5Cfrac%7B1%7D%7B%7Cset_A%7C%7D%5Csum_%7Ba%20%5Cin%20set_A%7D%7Ba.index%7D&height=48&width=234","alt":null,"position":{"start":{"line":95,"column":440,"offset":2873},"end":{"line":95,"column":643,"offset":3076},"indent":[]}}],"position":{"start":{"line":95,"column":5,"offset":2438},"end":{"line":95,"column":643,"offset":3076},"indent":[]}}],"position":{"start":{"line":95,"column":3,"offset":2436},"end":{"line":95,"column":643,"offset":3076},"indent":[]}}],"position":{"start":{"line":95,"column":3,"offset":2436},"end":{"line":95,"column":643,"offset":3076},"indent":[]}}],"position":{"start":{"line":94,"column":1,"offset":2398},"end":{"line":95,"column":643,"offset":3076},"indent":[1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"Step 3：遍历 ","position":{"start":{"line":96,"column":3,"offset":3079},"end":{"line":96,"column":13,"offset":3089},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'part1'</code>","position":{"start":{"line":96,"column":13,"offset":3089},"end":{"line":96,"column":22,"offset":3098},"indent":[]}},{"type":"text","value":" 的节点，对每一个节点 B（与 Step 2 相似）：","position":{"start":{"line":96,"column":22,"offset":3098},"end":{"line":96,"column":49,"offset":3125},"indent":[]}}],"position":{"start":{"line":96,"column":3,"offset":3079},"end":{"line":96,"column":49,"offset":3125},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"找到与 B 相连的属于 ","position":{"start":{"line":97,"column":5,"offset":3130},"end":{"line":97,"column":17,"offset":3142},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'part2'</code>","position":{"start":{"line":97,"column":17,"offset":3142},"end":{"line":97,"column":26,"offset":3151},"indent":[]}},{"type":"text","value":" 的节点的集合 ","position":{"start":{"line":97,"column":26,"offset":3151},"end":{"line":97,"column":34,"offset":3159},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/__latex/dc5ec10db72d3f1928fb51c6da59707a.svg#card=math&code=set_B%0A&height=16&width=32","alt":null,"position":{"start":{"line":97,"column":34,"offset":3159},"end":{"line":97,"column":154,"offset":3279},"indent":[]}},{"type":"text","value":"，加和 ","position":{"start":{"line":97,"column":154,"offset":3279},"end":{"line":97,"column":158,"offset":3283},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/__latex/dc5ec10db72d3f1928fb51c6da59707a.svg#card=math&code=set_B%0A&height=16&width=32","alt":null,"position":{"start":{"line":97,"column":158,"offset":3283},"end":{"line":97,"column":278,"offset":3403},"indent":[]}},{"type":"text","value":" 中所有节点的 index，并除以 ","position":{"start":{"line":97,"column":278,"offset":3403},"end":{"line":97,"column":296,"offset":3421},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/__latex/dc5ec10db72d3f1928fb51c6da59707a.svg#card=math&code=set_B%0A&height=16&width=32","alt":null,"position":{"start":{"line":97,"column":296,"offset":3421},"end":{"line":97,"column":416,"offset":3541},"indent":[]}},{"type":"text","value":" 的元素个数，得数覆盖 B 的 index 值：","position":{"start":{"line":97,"column":416,"offset":3541},"end":{"line":97,"column":440,"offset":3565},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/__latex/2eb533abba4f4502e1bd524e1fb792e6.svg#card=math&code=B.index%20%3D%20%5Cfrac%7B1%7D%7B%7Cset_B%7C%7D%5Csum_%7Bb%20%5Cin%20set_B%7D%7Bb.index%7D&height=48&width=232","alt":null,"position":{"start":{"line":97,"column":440,"offset":3565},"end":{"line":97,"column":643,"offset":3768},"indent":[]}}],"position":{"start":{"line":97,"column":5,"offset":3130},"end":{"line":97,"column":643,"offset":3768},"indent":[]}}],"position":{"start":{"line":97,"column":3,"offset":3128},"end":{"line":97,"column":643,"offset":3768},"indent":[]}}],"position":{"start":{"line":97,"column":3,"offset":3128},"end":{"line":97,"column":643,"offset":3768},"indent":[]}}],"position":{"start":{"line":96,"column":1,"offset":3077},"end":{"line":97,"column":643,"offset":3768},"indent":[1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"Step 4：两部分节点分别按照节点的序号 index 进行排序，最终按照节点顺序安排节点位置。","position":{"start":{"line":98,"column":3,"offset":3771},"end":{"line":98,"column":51,"offset":3819},"indent":[]}}],"position":{"start":{"line":98,"column":3,"offset":3771},"end":{"line":98,"column":51,"offset":3819},"indent":[]}}],"position":{"start":{"line":98,"column":1,"offset":3769},"end":{"line":98,"column":51,"offset":3819},"indent":[]}}],"position":{"start":{"line":93,"column":1,"offset":2337},"end":{"line":98,"column":51,"offset":3819},"indent":[1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#实现","title":null,"children":[],"data":{"hProperties":{"aria-label":"实现 permalink","class":"anchor"},"hChildren":[{"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":100,"column":4,"offset":3824},"end":{"line":100,"column":6,"offset":3826},"indent":[]}}],"position":{"start":{"line":100,"column":1,"offset":3821},"end":{"line":100,"column":6,"offset":3826},"indent":[]},"data":{"id":"实现","htmlAttributes":{"id":"实现"},"hProperties":{"id":"实现"}}},{"type":"paragraph","children":[{"type":"text","value":"下面代码展示了自定义名为 ","position":{"start":{"line":101,"column":1,"offset":3827},"end":{"line":101,"column":14,"offset":3840},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'bigraph-layout'</code>","position":{"start":{"line":101,"column":14,"offset":3840},"end":{"line":101,"column":32,"offset":3858},"indent":[]}},{"type":"text","value":" 的二分图布局，完整代码参见：","position":{"start":{"line":101,"column":32,"offset":3858},"end":{"line":101,"column":47,"offset":3873},"indent":[]}},{"type":"link","title":null,"url":"https://antv.alipay.com/zh-cn/g6/3.x/demo/net/layout-custom-bigraph.html","children":[{"type":"text","value":"自定义布局-二分图","position":{"start":{"line":101,"column":48,"offset":3874},"end":{"line":101,"column":57,"offset":3883},"indent":[]}}],"position":{"start":{"line":101,"column":47,"offset":3873},"end":{"line":101,"column":132,"offset":3958},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"。使用该布局的方式与使用内置布局方式相同，都是在实例化图时将其配置到 ","position":{"start":{"line":101,"column":132,"offset":3958},"end":{"line":101,"column":167,"offset":3993},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">layout</code>","position":{"start":{"line":101,"column":167,"offset":3993},"end":{"line":101,"column":175,"offset":4001},"indent":[]}},{"type":"text","value":" 配置项中，详见：","position":{"start":{"line":101,"column":175,"offset":4001},"end":{"line":101,"column":184,"offset":4010},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/qopkkg","children":[{"type":"text","value":"使用布局 Layout","position":{"start":{"line":101,"column":185,"offset":4011},"end":{"line":101,"column":196,"offset":4022},"indent":[]}}],"position":{"start":{"line":101,"column":184,"offset":4010},"end":{"line":101,"column":235,"offset":4061},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"。","position":{"start":{"line":101,"column":235,"offset":4061},"end":{"line":101,"column":236,"offset":4062},"indent":[]}}],"position":{"start":{"line":101,"column":1,"offset":3827},"end":{"line":101,"column":236,"offset":4062},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerLayout</span><span class=\"token punctuation\">(</span><span class=\"token string\">'bigraph-layout'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 默认参数</span>\n <span class=\"token function-variable function\">getDefaultCfg</span><span class=\"token punctuation\">:</span> <span class=\"token keyword\">function</span> <span class=\"token function\">getDefaultCfg</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>\n center<span class=\"token punctuation\">:</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> <span class=\"token comment\">// 布局的中心</span>\n biSep<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 两部分的间距</span>\n nodeSep<span class=\"token punctuation\">:</span> <span class=\"token number\">20</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 同一部分的节点艰巨</span>\n direction<span class=\"token punctuation\">:</span> <span class=\"token string\">'horizontal'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 两部分的分布方向</span>\n nodeSize<span class=\"token punctuation\">:</span> <span class=\"token number\">20</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 节点大小</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 comment\">// 执行布局</span>\n <span class=\"token function-variable function\">execute</span><span class=\"token punctuation\">:</span> <span class=\"token keyword\">function</span> <span class=\"token function\">execute</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">var</span> self <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> center <span class=\"token operator\">=</span> self<span class=\"token punctuation\">.</span>center<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> biSep <span class=\"token operator\">=</span> self<span class=\"token punctuation\">.</span>biSep<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> nodeSep <span class=\"token operator\">=</span> self<span class=\"token punctuation\">.</span>nodeSep<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> nodeSize <span class=\"token operator\">=</span> self<span class=\"token punctuation\">.</span>nodeSize<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> part1Pos <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n part2Pos <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 若指定为横向分布</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>self<span class=\"token punctuation\">.</span>direction <span class=\"token operator\">===</span> <span class=\"token string\">'horizontal'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n part1Pos <span class=\"token operator\">=</span> center<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">-</span> biSep <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">;</span>\n part2Pos <span class=\"token operator\">=</span> center<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">+</span> biSep <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token keyword\">var</span> nodes <span class=\"token operator\">=</span> self<span class=\"token punctuation\">.</span>nodes<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> edges <span class=\"token operator\">=</span> self<span class=\"token punctuation\">.</span>edges<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> part1Nodes <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> part2Nodes <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> part1NodeMap <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>\n <span class=\"token keyword\">var</span> part2NodeMap <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>\n <span class=\"token comment\">// separate the nodes and init the positions</span>\n nodes<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">node<span class=\"token punctuation\">,</span> i</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>node<span class=\"token punctuation\">.</span>cluster <span class=\"token operator\">===</span> <span class=\"token string\">'part1'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n part1Nodes<span class=\"token punctuation\">.</span><span class=\"token function\">push</span><span class=\"token punctuation\">(</span>node<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n part1NodeMap<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> i<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n part2Nodes<span class=\"token punctuation\">.</span><span class=\"token function\">push</span><span class=\"token punctuation\">(</span>node<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n part2NodeMap<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> i<span class=\"token punctuation\">)</span><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\n <span class=\"token comment\">// 对 part1 的节点进行排序</span>\n part1Nodes<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">p1n</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">var</span> index <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> adjCount <span class=\"token operator\">=</span> <span class=\"token number\">0</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 keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">edge</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">var</span> sourceId <span class=\"token operator\">=</span> edge<span class=\"token punctuation\">.</span>source<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> targetId <span class=\"token operator\">=</span> edge<span class=\"token punctuation\">.</span>target<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>sourceId <span class=\"token operator\">===</span> p1n<span class=\"token punctuation\">.</span>id<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n index <span class=\"token operator\">+=</span> part2NodeMap<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span>targetId<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n adjCount<span class=\"token operator\">++</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>targetId <span class=\"token operator\">===</span> p1n<span class=\"token punctuation\">.</span>id<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n index <span class=\"token operator\">+=</span> part2NodeMap<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span>sourceId<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n adjCount<span class=\"token operator\">++</span><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 index <span class=\"token operator\">/=</span> adjCount<span class=\"token punctuation\">;</span>\n p1n<span class=\"token punctuation\">.</span>index <span class=\"token operator\">=</span> index<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n part1Nodes<span class=\"token punctuation\">.</span><span class=\"token function\">sort</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">a<span class=\"token punctuation\">,</span> b</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> a<span class=\"token punctuation\">.</span>index <span class=\"token operator\">-</span> b<span class=\"token punctuation\">.</span>index<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token comment\">// 对 part2 的节点进行排序</span>\n part2Nodes<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">p2n</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">var</span> index <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> adjCount <span class=\"token operator\">=</span> <span class=\"token number\">0</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 keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">edge</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">var</span> sourceId <span class=\"token operator\">=</span> edge<span class=\"token punctuation\">.</span>source<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> targetId <span class=\"token operator\">=</span> edge<span class=\"token punctuation\">.</span>target<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>sourceId <span class=\"token operator\">===</span> p2n<span class=\"token punctuation\">.</span>id<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n index <span class=\"token operator\">+=</span> part1NodeMap<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span>targetId<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n adjCount<span class=\"token operator\">++</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>targetId <span class=\"token operator\">===</span> p2n<span class=\"token punctuation\">.</span>id<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n index <span class=\"token operator\">+=</span> part1NodeMap<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span>sourceId<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n adjCount<span class=\"token operator\">++</span><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 index <span class=\"token operator\">/=</span> adjCount<span class=\"token punctuation\">;</span>\n p2n<span class=\"token punctuation\">.</span>index <span class=\"token operator\">=</span> index<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n part2Nodes<span class=\"token punctuation\">.</span><span class=\"token function\">sort</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">a<span class=\"token punctuation\">,</span> b</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> a<span class=\"token punctuation\">.</span>index <span class=\"token operator\">-</span> b<span class=\"token punctuation\">.</span>index<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token comment\">// 放置节点</span>\n <span class=\"token keyword\">var</span> hLength <span class=\"token operator\">=</span>\n part1Nodes<span class=\"token punctuation\">.</span>length <span class=\"token operator\">></span> part2Nodes<span class=\"token punctuation\">.</span>length\n <span class=\"token operator\">?</span> part1Nodes<span class=\"token punctuation\">.</span>length\n <span class=\"token punctuation\">:</span> part2Nodes<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> height <span class=\"token operator\">=</span> hLength <span class=\"token operator\">*</span> <span class=\"token punctuation\">(</span>nodeSep <span class=\"token operator\">+</span> nodeSize<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> begin <span class=\"token operator\">=</span> center<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">-</span> height <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>self<span class=\"token punctuation\">.</span>direction <span class=\"token operator\">===</span> <span class=\"token string\">'vertical'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n begin <span class=\"token operator\">=</span> center<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">-</span> height <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n part1Nodes<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">p1n<span class=\"token punctuation\">,</span> i</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>self<span class=\"token punctuation\">.</span>direction <span class=\"token operator\">===</span> <span class=\"token string\">'horizontal'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n p1n<span class=\"token punctuation\">.</span>x <span class=\"token operator\">=</span> part1Pos<span class=\"token punctuation\">;</span>\n p1n<span class=\"token punctuation\">.</span>y <span class=\"token operator\">=</span> begin <span class=\"token operator\">+</span> i <span class=\"token operator\">*</span> <span class=\"token punctuation\">(</span>nodeSep <span class=\"token operator\">+</span> nodeSize<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n p1n<span class=\"token punctuation\">.</span>x <span class=\"token operator\">=</span> begin <span class=\"token operator\">+</span> i <span class=\"token operator\">*</span> <span class=\"token punctuation\">(</span>nodeSep <span class=\"token operator\">+</span> nodeSize<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n p1n<span class=\"token punctuation\">.</span>y <span class=\"token operator\">=</span> part1Pos<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 part2Nodes<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">p2n<span class=\"token punctuation\">,</span> i</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>self<span class=\"token punctuation\">.</span>direction <span class=\"token operator\">===</span> <span class=\"token string\">'horizontal'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n p2n<span class=\"token punctuation\">.</span>x <span class=\"token operator\">=</span> part2Pos<span class=\"token punctuation\">;</span>\n p2n<span class=\"token punctuation\">.</span>y <span class=\"token operator\">=</span> begin <span class=\"token operator\">+</span> i <span class=\"token operator\">*</span> <span class=\"token punctuation\">(</span>nodeSep <span class=\"token operator\">+</span> nodeSize<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n p2n<span class=\"token punctuation\">.</span>x <span class=\"token operator\">=</span> begin <span class=\"token operator\">+</span> i <span class=\"token operator\">*</span> <span class=\"token punctuation\">(</span>nodeSep <span class=\"token operator\">+</span> nodeSize<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n p2n<span class=\"token punctuation\">.</span>y <span class=\"token operator\">=</span> part2Pos<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 <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":102,"column":1,"offset":4063},"end":{"line":216,"column":4,"offset":7258},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":218,"column":1,"offset":7260}}}}