@antv/g6
Version:
graph visualization frame work
1 lines • 50.8 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ast-f143123bf65084c4d30d46d70d094472-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 内置了折线 loop 边，其默认样式如下。","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":25,"offset":25}}},{"type":"raw","value":"<br />","position":{"start":{"line":2,"column":25,"offset":25},"end":{"line":2,"column":31,"offset":31}}},{"type":"text","value":"\n","position":{"start":{"line":2,"column":31,"offset":31},"end":{"line":3,"column":1,"offset":32}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/156681/1570875933229-5bd7e62a-b4f5-487c-9ee9-3a7df1d6e220.png#align=left&display=inline&height=60&name=image.png&originHeight=120&originWidth=114&search=&size=6588&status=done&width=57","alt":"image.png"},"children":[],"position":{"start":{"line":3,"column":1,"offset":32},"end":{"line":3,"column":238,"offset":269}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":3,"column":238,"offset":269}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" 注意 ","position":{"start":{"line":5,"column":1,"offset":271},"end":{"line":5,"column":5,"offset":275}}},{"type":"raw","value":"<br />","position":{"start":{"line":5,"column":5,"offset":275},"end":{"line":5,"column":11,"offset":281}}},{"type":"text","value":"loop 边适用于自环边，即起始点与结束点为相同节点的边，在不同端点的边上适用 loop 边将会出现异常效果。\n","position":{"start":{"line":5,"column":11,"offset":281},"end":{"line":6,"column":1,"offset":337}}},{"type":"raw","value":"<br />","position":{"start":{"line":6,"column":1,"offset":337},"end":{"line":6,"column":7,"offset":343}}},{"type":"text","value":"\n","position":{"start":{"line":6,"column":7,"offset":343},"end":{"line":7,"column":1,"offset":344}}},{"type":"raw","value":"<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1570777918386-5b4789f6-4287-4e33-bb59-a671d5cb008d.png#align=left&display=inline&height=176&name=image.png&originHeight=602&originWidth=256&search=&size=37135&status=done&width=75' width='75' height='176' />","position":{"start":{"line":7,"column":1,"offset":344},"end":{"line":7,"column":264,"offset":607}}}],"position":{"start":{"line":5,"column":1,"offset":271},"end":{"line":7,"column":264,"offset":607}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"使用方法"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95","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":9,"column":4,"offset":612},"end":{"line":9,"column":8,"offset":616}}}],"position":{"start":{"line":9,"column":1,"offset":609},"end":{"line":9,"column":8,"offset":616}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"如 ","position":{"start":{"line":10,"column":1,"offset":617},"end":{"line":10,"column":3,"offset":619}}},{"type":"element","tagName":"a","properties":{"href":"../defaultEdge"},"children":[{"type":"text","value":"内置边","position":{"start":{"line":10,"column":4,"offset":620},"end":{"line":10,"column":7,"offset":623}}}],"position":{"start":{"line":10,"column":3,"offset":619},"end":{"line":10,"column":24,"offset":640}}},{"type":"text","value":" 一节所示，配置边的方式有两种：实例化图时全局配置，在数据中动态配置。","position":{"start":{"line":10,"column":24,"offset":640},"end":{"line":10,"column":59,"offset":675}}}],"position":{"start":{"line":10,"column":1,"offset":617},"end":{"line":10,"column":59,"offset":675}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"1-实例化图时全局配置"},"children":[{"type":"element","tagName":"a","properties":{"href":"#1-%E5%AE%9E%E4%BE%8B%E5%8C%96%E5%9B%BE%E6%97%B6%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE","aria-label":"1 实例化图时全局配置 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":"1 实例化图时全局配置","position":{"start":{"line":13,"column":5,"offset":682},"end":{"line":13,"column":16,"offset":693}}}],"position":{"start":{"line":13,"column":1,"offset":678},"end":{"line":13,"column":16,"offset":693}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"用户在实例化 Graph 时候可以通过 ","position":{"start":{"line":14,"column":1,"offset":694},"end":{"line":14,"column":21,"offset":714}}},{"type":"raw","value":"<code class=\"language-text\">defaultEdge</code>","position":{"start":{"line":14,"column":21,"offset":714},"end":{"line":14,"column":34,"offset":727}}},{"type":"text","value":" 指定 ","position":{"start":{"line":14,"column":34,"offset":727},"end":{"line":14,"column":38,"offset":731}}},{"type":"raw","value":"<code class=\"language-text\">shape</code>","position":{"start":{"line":14,"column":38,"offset":731},"end":{"line":14,"column":45,"offset":738}}},{"type":"text","value":" 为 ","position":{"start":{"line":14,"column":45,"offset":738},"end":{"line":14,"column":48,"offset":741}}},{"type":"raw","value":"<code class=\"language-text\">'loop'</code>","position":{"start":{"line":14,"column":48,"offset":741},"end":{"line":14,"column":56,"offset":749}}},{"type":"text","value":"，即可使用 ","position":{"start":{"line":14,"column":56,"offset":749},"end":{"line":14,"column":62,"offset":755}}},{"type":"raw","value":"<code class=\"language-text\">loop</code>","position":{"start":{"line":14,"column":62,"offset":755},"end":{"line":14,"column":68,"offset":761}}},{"type":"text","value":" 边。需要注意的是，如果图上存在非自环边，loop 将会表现异常。因此不建议在存在非自环边的图上使用此全局配置方法。","position":{"start":{"line":14,"column":68,"offset":761},"end":{"line":14,"column":126,"offset":819}}}],"position":{"start":{"line":14,"column":1,"offset":694},"end":{"line":14,"column":126,"offset":819}}},{"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 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 defaultEdge<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'loop'</span><span class=\"token punctuation\">,</span>\n <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><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":15,"column":1,"offset":820},"end":{"line":25,"column":4,"offset":976}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"2-在数据中动态配置"},"children":[{"type":"element","tagName":"a","properties":{"href":"#2-%E5%9C%A8%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%8A%A8%E6%80%81%E9%85%8D%E7%BD%AE","aria-label":"2 在数据中动态配置 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":"2 在数据中动态配置","position":{"start":{"line":28,"column":5,"offset":983},"end":{"line":28,"column":15,"offset":993}}}],"position":{"start":{"line":28,"column":1,"offset":979},"end":{"line":28,"column":15,"offset":993}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。","position":{"start":{"line":29,"column":1,"offset":994},"end":{"line":29,"column":70,"offset":1063}}}],"position":{"start":{"line":29,"column":1,"offset":994},"end":{"line":29,"column":70,"offset":1063}}},{"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> 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 operator\">...</span> <span class=\"token comment\">// 节点</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n edges<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">{</span>\n source<span class=\"token punctuation\">:</span> <span class=\"token string\">'node0'</span><span class=\"token punctuation\">,</span>\n target<span class=\"token punctuation\">:</span> <span class=\"token string\">'node0'</span>\n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'loop'</span><span class=\"token punctuation\">,</span>\n <span class=\"token operator\">...</span> <span class=\"token comment\">// 其他配置</span>\n style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token operator\">...</span> <span class=\"token comment\">// 样式属性，每种边的详细样式属性参见各边文档</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token operator\">...</span> <span class=\"token comment\">// 其他边</span>\n <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span></code></pre></div>","position":{"start":{"line":30,"column":1,"offset":1064},"end":{"line":47,"column":4,"offset":1295}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"配置项说明"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%85%8D%E7%BD%AE%E9%A1%B9%E8%AF%B4%E6%98%8E","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":50,"column":4,"offset":1301},"end":{"line":50,"column":9,"offset":1306}}}],"position":{"start":{"line":50,"column":1,"offset":1298},"end":{"line":50,"column":9,"offset":1306}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"自环是指连接单个节点自身的边，是一种边的特殊情况，因此，在通用属性基础上，支持了特殊的配置 ","position":{"start":{"line":51,"column":1,"offset":1307},"end":{"line":51,"column":47,"offset":1353}}},{"type":"raw","value":"<code class=\"language-text\">loopCfg</code>","position":{"start":{"line":51,"column":47,"offset":1353},"end":{"line":51,"column":56,"offset":1362}}},{"type":"text","value":"。","position":{"start":{"line":51,"column":56,"offset":1362},"end":{"line":51,"column":57,"offset":1363}}}],"position":{"start":{"line":51,"column":1,"offset":1307},"end":{"line":51,"column":57,"offset":1363}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"loop 边支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解：","position":{"start":{"line":53,"column":1,"offset":1365},"end":{"line":53,"column":42,"offset":1406}}}],"position":{"start":{"line":53,"column":1,"offset":1365},"end":{"line":53,"column":42,"offset":1406}}},{"type":"text","value":"\n"},{"type":"element","tagName":"table","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"thead","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"th","properties":{"align":null},"children":[{"type":"text","value":"名称","position":{"start":{"line":55,"column":3,"offset":1410},"end":{"line":55,"column":5,"offset":1412}}}],"position":{"start":{"line":55,"column":3,"offset":1410},"end":{"line":55,"column":5,"offset":1412}}},{"type":"text","value":"\n"},{"type":"element","tagName":"th","properties":{"align":null},"children":[{"type":"text","value":"含义","position":{"start":{"line":55,"column":8,"offset":1415},"end":{"line":55,"column":10,"offset":1417}}}],"position":{"start":{"line":55,"column":8,"offset":1415},"end":{"line":55,"column":10,"offset":1417}}},{"type":"text","value":"\n"},{"type":"element","tagName":"th","properties":{"align":null},"children":[{"type":"text","value":"类型","position":{"start":{"line":55,"column":13,"offset":1420},"end":{"line":55,"column":15,"offset":1422}}}],"position":{"start":{"line":55,"column":13,"offset":1420},"end":{"line":55,"column":15,"offset":1422}}},{"type":"text","value":"\n"},{"type":"element","tagName":"th","properties":{"align":null},"children":[{"type":"text","value":"备注","position":{"start":{"line":55,"column":18,"offset":1425},"end":{"line":55,"column":20,"offset":1427}}}],"position":{"start":{"line":55,"column":18,"offset":1425},"end":{"line":55,"column":20,"offset":1427}}},{"type":"text","value":"\n"}],"position":{"start":{"line":55,"column":1,"offset":1408},"end":{"line":55,"column":22,"offset":1429}}},{"type":"text","value":"\n"}],"position":{"start":{"line":55,"column":1,"offset":1408},"end":{"line":55,"column":22,"offset":1429}}},{"type":"text","value":"\n"},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"color","position":{"start":{"line":57,"column":3,"offset":1458},"end":{"line":57,"column":8,"offset":1463}}}],"position":{"start":{"line":57,"column":3,"offset":1458},"end":{"line":57,"column":8,"offset":1463}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"边的颜色","position":{"start":{"line":57,"column":11,"offset":1466},"end":{"line":57,"column":15,"offset":1470}}}],"position":{"start":{"line":57,"column":11,"offset":1466},"end":{"line":57,"column":15,"offset":1470}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"String","position":{"start":{"line":57,"column":18,"offset":1473},"end":{"line":57,"column":24,"offset":1479}}}],"position":{"start":{"line":57,"column":18,"offset":1473},"end":{"line":57,"column":24,"offset":1479}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"优先级低于 style 中的 stroke","position":{"start":{"line":57,"column":27,"offset":1482},"end":{"line":57,"column":48,"offset":1503}}}],"position":{"start":{"line":57,"column":27,"offset":1482},"end":{"line":57,"column":48,"offset":1503}}},{"type":"text","value":"\n"}],"position":{"start":{"line":57,"column":1,"offset":1456},"end":{"line":57,"column":50,"offset":1505}}},{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"style","position":{"start":{"line":58,"column":3,"offset":1508},"end":{"line":58,"column":8,"offset":1513}}}],"position":{"start":{"line":58,"column":3,"offset":1508},"end":{"line":58,"column":8,"offset":1513}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"边的样式","position":{"start":{"line":58,"column":11,"offset":1516},"end":{"line":58,"column":15,"offset":1520}}}],"position":{"start":{"line":58,"column":11,"offset":1516},"end":{"line":58,"column":15,"offset":1520}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"Object","position":{"start":{"line":58,"column":18,"offset":1523},"end":{"line":58,"column":24,"offset":1529}}}],"position":{"start":{"line":58,"column":18,"offset":1523},"end":{"line":58,"column":24,"offset":1529}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"Canvas支持的属性","position":{"start":{"line":58,"column":27,"offset":1532},"end":{"line":58,"column":38,"offset":1543}}}],"position":{"start":{"line":58,"column":27,"offset":1532},"end":{"line":58,"column":38,"offset":1543}}},{"type":"text","value":"\n"}],"position":{"start":{"line":58,"column":1,"offset":1506},"end":{"line":58,"column":40,"offset":1545}}},{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"style.endArrow","position":{"start":{"line":59,"column":3,"offset":1548},"end":{"line":59,"column":17,"offset":1562}}}],"position":{"start":{"line":59,"column":3,"offset":1548},"end":{"line":59,"column":17,"offset":1562}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"边结束端是否有箭头","position":{"start":{"line":59,"column":20,"offset":1565},"end":{"line":59,"column":29,"offset":1574}}}],"position":{"start":{"line":59,"column":20,"offset":1565},"end":{"line":59,"column":29,"offset":1574}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"Boolean","position":{"start":{"line":59,"column":32,"offset":1577},"end":{"line":59,"column":39,"offset":1584}}}],"position":{"start":{"line":59,"column":32,"offset":1577},"end":{"line":59,"column":39,"offset":1584}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"默认为 false","position":{"start":{"line":59,"column":42,"offset":1587},"end":{"line":59,"column":51,"offset":1596}}}],"position":{"start":{"line":59,"column":42,"offset":1587},"end":{"line":59,"column":51,"offset":1596}}},{"type":"text","value":"\n"}],"position":{"start":{"line":59,"column":1,"offset":1546},"end":{"line":59,"column":53,"offset":1598}}},{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"label","position":{"start":{"line":60,"column":3,"offset":1601},"end":{"line":60,"column":8,"offset":1606}}}],"position":{"start":{"line":60,"column":3,"offset":1601},"end":{"line":60,"column":8,"offset":1606}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"标签文本文字","position":{"start":{"line":60,"column":11,"offset":1609},"end":{"line":60,"column":17,"offset":1615}}}],"position":{"start":{"line":60,"column":11,"offset":1609},"end":{"line":60,"column":17,"offset":1615}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"String","position":{"start":{"line":60,"column":20,"offset":1618},"end":{"line":60,"column":26,"offset":1624}}}],"position":{"start":{"line":60,"column":20,"offset":1618},"end":{"line":60,"column":26,"offset":1624}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[],"position":{"start":{"line":60,"column":30,"offset":1628},"end":{"line":60,"column":30,"offset":1628}}},{"type":"text","value":"\n"}],"position":{"start":{"line":60,"column":1,"offset":1599},"end":{"line":60,"column":31,"offset":1629}}},{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"labelCfg","position":{"start":{"line":61,"column":3,"offset":1632},"end":{"line":61,"column":11,"offset":1640}}}],"position":{"start":{"line":61,"column":3,"offset":1632},"end":{"line":61,"column":11,"offset":1640}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"文件配置项","position":{"start":{"line":61,"column":14,"offset":1643},"end":{"line":61,"column":19,"offset":1648}}}],"position":{"start":{"line":61,"column":14,"offset":1643},"end":{"line":61,"column":19,"offset":1648}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"Object","position":{"start":{"line":61,"column":22,"offset":1651},"end":{"line":61,"column":28,"offset":1657}}}],"position":{"start":{"line":61,"column":22,"offset":1651},"end":{"line":61,"column":28,"offset":1657}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[],"position":{"start":{"line":61,"column":32,"offset":1661},"end":{"line":61,"column":32,"offset":1661}}},{"type":"text","value":"\n"}],"position":{"start":{"line":61,"column":1,"offset":1630},"end":{"line":61,"column":33,"offset":1662}}},{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"loopCfg","position":{"start":{"line":62,"column":5,"offset":1667},"end":{"line":62,"column":12,"offset":1674}}}],"position":{"start":{"line":62,"column":3,"offset":1665},"end":{"line":62,"column":14,"offset":1676}}}],"position":{"start":{"line":62,"column":3,"offset":1665},"end":{"line":62,"column":14,"offset":1676}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"自环特殊配置","position":{"start":{"line":62,"column":19,"offset":1681},"end":{"line":62,"column":25,"offset":1687}}}],"position":{"start":{"line":62,"column":17,"offset":1679},"end":{"line":62,"column":27,"offset":1689}}}],"position":{"start":{"line":62,"column":17,"offset":1679},"end":{"line":62,"column":27,"offset":1689}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Object","position":{"start":{"line":62,"column":32,"offset":1694},"end":{"line":62,"column":38,"offset":1700}}}],"position":{"start":{"line":62,"column":30,"offset":1692},"end":{"line":62,"column":40,"offset":1702}}}],"position":{"start":{"line":62,"column":30,"offset":1692},"end":{"line":62,"column":40,"offset":1702}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[],"position":{"start":{"line":62,"column":44,"offset":1706},"end":{"line":62,"column":44,"offset":1706}}},{"type":"text","value":"\n"}],"position":{"start":{"line":62,"column":1,"offset":1663},"end":{"line":62,"column":45,"offset":1707}}},{"type":"text","value":"\n"}],"position":{"start":{"line":57,"column":1,"offset":1456},"end":{"line":62,"column":45,"offset":1707}}},{"type":"text","value":"\n"}],"position":{"start":{"line":55,"column":1,"offset":1408},"end":{"line":62,"column":45,"offset":1707}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"样式属性-style"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%A0%B7%E5%BC%8F%E5%B1%9E%E6%80%A7-style","aria-label":"样式属性 style 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":"样式属性 style","position":{"start":{"line":66,"column":5,"offset":1715},"end":{"line":66,"column":15,"offset":1725}}}],"position":{"start":{"line":66,"column":1,"offset":1711},"end":{"line":66,"column":15,"offset":1725}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Object 类型。配置项与边的通用样式属性相同，见 ","position":{"start":{"line":67,"column":1,"offset":1726},"end":{"line":67,"column":28,"offset":1753}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/internal-edge","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"内置边","position":{"start":{"line":67,"column":29,"offset":1754},"end":{"line":67,"column":32,"offset":1757}}}],"position":{"start":{"line":67,"column":28,"offset":1753},"end":{"line":67,"column":78,"offset":1803}}},{"type":"text","value":"。下面代码演示在实例化图时全局配置方法中配置 ","position":{"start":{"line":67,"column":78,"offset":1803},"end":{"line":67,"column":101,"offset":1826}}},{"type":"raw","value":"<code class=\"language-text\">style</code>","position":{"start":{"line":67,"column":101,"offset":1826},"end":{"line":67,"column":108,"offset":1833}}},{"type":"text","value":"，以达到下图效果。","position":{"start":{"line":67,"column":108,"offset":1833},"end":{"line":67,"column":117,"offset":1842}}},{"type":"raw","value":"<br />","position":{"start":{"line":67,"column":117,"offset":1842},"end":{"line":67,"column":123,"offset":1848}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/156681/1570875958411-aa33e3e9-1eee-4061-873e-a677b7dd495a.png#align=left&display=inline&height=57&name=image.png&originHeight=114&originWidth=88&search=&size=8617&status=done&width=44","alt":"image.png"},"children":[],"position":{"start":{"line":67,"column":123,"offset":1848},"end":{"line":67,"column":359,"offset":2084}}}],"position":{"start":{"line":67,"column":1,"offset":1726},"end":{"line":67,"column":359,"offset":2084}}},{"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> 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>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node0'</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span>\n size<span class=\"token punctuation\">:</span> <span class=\"token number\">20</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 edges<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">{</span>\n source<span class=\"token punctuation\">:</span> <span class=\"token string\">'node0'</span><span class=\"token punctuation\">,</span>\n target<span class=\"token punctuation\">:</span> <span class=\"token string\">'node0'</span><span class=\"token punctuation\">,</span>\n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'loop'</span><span class=\"token punctuation\">,</span>\n label<span class=\"token punctuation\">:</span> <span class=\"token string\">'loop'</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<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">G6<span class=\"token punctuation\">.</span>Graph</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n container<span class=\"token punctuation\">:</span> <span class=\"token string\">'mountNode'</span><span class=\"token punctuation\">,</span>\n width<span class=\"token punctuation\">:</span> <span class=\"token number\">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 defaultEdge<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// shape: 'loop', // 在数据中已经指定 shape，这里无需再次指定</span>\n style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n endArrow<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'#088'</span><span class=\"token punctuation\">,</span>\n lineWidth<span class=\"token punctuation\">:</span> <span class=\"token number\">3</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<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">data</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":68,"column":1,"offset":2085},"end":{"line":99,"column":4,"offset":2556}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"标签文本配置-labelcfg"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%A0%87%E7%AD%BE%E6%96%87%E6%9C%AC%E9%85%8D%E7%BD%AE-labelcfg","aria-label":"标签文本配置 labelcfg 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":"标签文本配置 labelCfg","position":{"start":{"line":102,"column":5,"offset":2563},"end":{"line":102,"column":20,"offset":2578}}}],"position":{"start":{"line":102,"column":1,"offset":2559},"end":{"line":102,"column":20,"offset":2578}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Object 类型。其配置与边的通用文本配置相同，见 ","position":{"start":{"line":103,"column":1,"offset":2579},"end":{"line":103,"column":28,"offset":2606}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/internal-edge","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"内置边","position":{"start":{"line":103,"column":29,"offset":2607},"end":{"line":103,"column":32,"offset":2610}}}],"position":{"start":{"line":103,"column":28,"offset":2606},"end":{"line":103,"column":78,"offset":2656}}},{"type":"text","value":"。基于上面 ","position":{"start":{"line":103,"column":78,"offset":2656},"end":{"line":103,"column":84,"offset":2662}}},{"type":"element","tagName":"a","properties":{"href":"#XQFb2"},"children":[{"type":"text","value":"样式属性 style","position":{"start":{"line":103,"column":85,"offset":2663},"end":{"line":103,"column":95,"offset":2673}}}],"position":{"start":{"line":103,"column":84,"offset":2662},"end":{"line":103,"column":104,"offset":2682}}},{"type":"text","value":" 中的代码，下面代码在 ","position":{"start":{"line":103,"column":104,"offset":2682},"end":{"line":103,"column":116,"offset":2694}}},{"type":"raw","value":"<code class=\"language-text\">defaultNode</code>","position":{"start":{"line":103,"column":116,"offset":2694},"end":{"line":103,"column":129,"offset":2707}}},{"type":"text","value":" 中增加了 ","position":{"start":{"line":103,"column":129,"offset":2707},"end":{"line":103,"column":135,"offset":2713}}},{"type":"raw","value":"<code class=\"language-text\">labelCfg</code>","position":{"start":{"line":103,"column":135,"offset":2713},"end":{"line":103,"column":145,"offset":2723}}},{"type":"text","value":" 配置项进行文本的配置，使之达到如下图效果。","position":{"start":{"line":103,"column":145,"offset":2723},"end":{"line":103,"column":167,"offset":2745}}},{"type":"raw","value":"<br />","position":{"start":{"line":103,"column":167,"offset":2745},"end":{"line":103,"column":173,"offset":2751}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/156681/1570878002730-b0e471d7-1273-425b-8cc3-0b6ba3f91b06.png#align=left&display=inline&height=51&name=image.png&originHeight=102&originWidth=120&search=&size=9700&status=done&width=60","alt":"image.png"},"children":[],"position":{"start":{"line":103,"column":173,"offset":2751},"end":{"line":103,"column":410,"offset":2988}}}],"position":{"start":{"line":103,"column":1,"offset":2579},"end":{"line":103,"column":410,"offset":2988}}},{"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> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// ... data 内容</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">G6<span class=\"token punctuation\">.</span>Graph</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// ... 图的其他配置</span>\n defaultEdge<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// ... 其他配置</span>\n labelCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n refY<span class=\"token punctuation\">:</span> <span class=\"token operator\">-</span><span class=\"token number\">5</span><span class=\"token punctuation\">,</span>\n refX<span class=\"token punctuation\">:</span> <span class=\"token number\">30</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<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token comment\">// ...</span>\n</code></pre></div>","position":{"start":{"line":104,"column":1,"offset":2989},"end":{"line":119,"column":4,"offset":3187}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"自环特殊配置-loopcfg"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E8%87%AA%E7%8E%AF%E7%89%B9%E6%AE%8A%E9%85%8D%E7%BD%AE-loopcfg","aria-label":"自环特殊配置 loopcfg 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":"自环特殊配置 loopCfg","position":{"start":{"line":122,"column":5,"offset":3194},"end":{"line":122,"column":19,"offset":3208}}}],"position":{"start":{"line":122,"column":1,"offset":3190},"end":{"line":122,"column":19,"offset":3208}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Object 类型。通过 ","position":{"start":{"line":123,"column":1,"offset":3209},"end":{"line":123,"column":14,"offset":3222}}},{"type":"raw","value":"<code class=\"language-text\">loopCfg</code>","position":{"start":{"line":123,"column":14,"offset":3222},"end":{"line":123,"column":23,"offset":3231}}},{"type":"text","value":" 配置自环的方位、高度、顺逆时针。","position":{"start":{"line":123,"column":23,"offset":3231},"end":{"line":123,"column":40,"offset":3248}}}],"position":{"start":{"line":123,"column":1,"offset":3209},"end":{"line":123,"column":40,"offset":3248}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"<code class=\"language-text\">position</code>","position":{"start":{"line":125,"column":3,"offset":3252},"end":{"line":125,"column":13,"offset":3262}}},{"type":"text","value":": 指定自环与节点的相对位置。默认为：","position":{"start":{"line":125,"column":13,"offset":3262},"end":{"line":125,"column":32,"offset":3281}}},{"type":"raw","value":"<code class=\"language-text\">top</code>","position":{"start":{"line":125,"column":32,"offset":3281},"end":{"line":125,"column":37,"offset":3286}}},{"type":"text","value":"。支持的值有：","position":{"start":{"line":125,"column":37,"offset":3286},"end":{"line":125,"column":44,"offset":3293}}},{"type":"raw","value":"<code class=\"language-text\">top</code>","position":{"start":{"line":125,"column":44,"offset":3293},"end":{"line":125,"column":49,"offset":3298}}},{"type":"text","value":", ","position":{"start":{"line":125,"column":49,"offset":3298},"end":{"line":125,"column":51,"offset":3300}}},{"type":"raw","value":"<code class=\"language-text\">top-right</code>","position":{"start":{"line":125,"column":51,"offset":3300},"end":{"line":125,"column":62,"offset":3311}}},{"type":"text","value":", ","position":{"start":{"line":125,"column":62,"offset":3311},"end":{"line":125,"column":64,"offset":3313}}},{"type":"raw","value":"<code class=\"language-text\">right</code>","position":{"start":{"line":125,"column":64,"offset":3313},"end":{"line":125,"column":71,"offset":3320}}},{"type":"text","value":",","position":{"start":{"line":125,"column":71,"offset":3320},"end":{"line":125,"column":72,"offset":3321}}},{"type":"raw","value":"<code class=\"language-text\">bottom-right</code>","position":{"start":{"line":125,"column":72,"offset":3321},"end":{"line":125,"column":86,"offset":3335}}},{"type":"text","value":", ","position":{"start":{"line":125,"column":86,"offset":3335},"end":{"line":125,"column":88,"offset":3337}}},{"type":"raw","value":"<code class=\"language-text\">bottom</code>","position":{"start":{"line":125,"column":88,"offset":3337},"end":{"line":125,"column":96,"offset":3345}}},{"type":"text","value":", ","position":{"start":{"line":125,"column":96,"offset":3345},"end":{"line":125,"column":98,"offset":3347}}},{"type":"raw","value":"<code class=\"language-text\">bottom-left</code>","position":{"start":{"line":125,"column":98,"offset":3347},"end":{"line":125,"column":111,"offset":3360}}},{"type":"text","value":", ","position":{"start":{"line":125,"column":111,"offset":3360},"end":{"line":125,"column":113,"offset":3362}}},{"type":"raw","value":"<code class=\"language-text\">left</code>","position":{"start":{"line":125,"column":113,"offset":3362},"end":{"line":125,"column":119,"offset":3368}}},{"type":"text","value":", ","position":{"start":{"line":125,"column":119,"offset":3368},"end":{"line":125,"column":121,"offset":3370}}},{"type":"raw","value":"<code class=\"language-text\">top-left</code>","position":{"start":{"line":125,"column":121,"offset":3370},"end":{"line":125,"column":131,"offset":3380}}}],"position":{"start":{"line":125,"column":1,"offset":3250},"end":{"line":125,"column":131,"offset":3380}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"<code class=\"language-text\">dist</code>","position":{"start":{"line":126,"column":3,"offset":3383},"end":{"line":126,"column":9,"offset":3389}}},{"type":"text","value":": 从节点 keyShape 的边缘到自环最顶端的位置，用于指定自环的曲度，默认为节点的高度。","position":{"start":{"line":126,"column":9,"offset":3389},"end":{"line":126,"column":56,"offset":3436}}}],"position":{"start":{"line":126,"column":1,"offset":3381},"end":{"line":126,"column":56,"offset":3436}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"<code class=\"language-text\">clockwise</code>","position":{"start":{"line":127,"column":3,"offset":3439},"end":{"line":127,"column":14,"offset":3450}}},{"type":"text","value":": 指定是否顺时针画环，默认为 ","position":{"start":{"line":127,"column":14,"offset":3450},"end":{"line":127,"column":30,"offset":3466}}},{"type":"raw","value":"<code class=\"language-text\">true</code>","position":{"start":{"line":127,"column":30,"offset":3466},"end":{"line":127,"column":36,"offset":3472}}},{"type":"text","value":"。","position":{"start":{"line":127,"column":36,"offset":3472},"end":{"line":127,"column":37,"offset":3473}}}],"position":{"start":{"line":127,"column":1,"offset":3437},"end":{"line":127,"column":37,"offset":3473}}},{"type":"text","value":"\n"}],"position":{"start":{"line":125,"column":1,"offset":3250},"end":{"line":127,"column":37,"offset":3473}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"基于上面 ","position":{"start":{"line":129,"column":1,"offset":3475},"end":{"line":129,"column":6,"offset":3480}}},{"type":"element","tagName":"a","properties":{"href":"#XQFb2"},"children":[{"type":"text","value":"样式属性 style","position":{"start":{"line":129,"column":7,"offset":3481},"end":{"line":129,"column":17,"offset":3491}}}],"position":{"start":{"line":129,"column":6,"offset":3480},"end":{"line":129,"column":26,"offset":3500}}},{"type":"text","value":" 中的代码，下面代码在 ","position":{"start":{"line":129,"column":26,"offset":3500},"end":{"line":129,"column":38,"offset":3512}}},{"type":"raw","value":"<code class=\"language-text\">defaultNode</code>","position":{"start":{"line":129,"column":38,"offset":3512},"end":{"line":129,"column":51,"offset":3525}}},{"type":"text","value":" 中增加了 ","position":{"start":{"line":129,"column":51,"offset":3525},"end":{"line":129,"column":57,"offset":3531}}},{"type":"raw","value":"<code class=\"language-text\">loopCfg</code>","position":{"start":{"line":129,"column":57,"offset":3531},"end":{"line":129,"column":66,"offset":3540}}},{"type":"text","value":" 配置项进行文本的配置，使之达到如下图效果。","position":{"start":{"line":129,"column":66,"offset":3540},"end":{"line":129,"column":88,"offset":3562}}},{"type":"raw","value":"<br />","position":{"start":{"line":129,"column":88,"offset":3562},"end":{"line":129,"column":94,"offset":3568}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/156681/1570878028299-38f92dba-d79a-4071-8b28-4da7ff3f07fe.png#align=left&display=inline&height=56&name=image.png&originHeight=112&originWidth=204&search=&size=15251&status=done&width=102","alt":"image.png"},"children":[],"position":{"start":{"line":129,"column":94,"offset":3568},"end":{"line":129,"column":333,"offset":3807}}}],"position":{"start":{"line":129,"column":1,"offset":3475},"end":{"line":129,"column":333,"offset":3807}}},{"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> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// ... data 内容</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">G6<span class=\"token punctuation\">.</span>Graph</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// ... 图的其他配置</span>\n defaultEdge<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// ... 其他配置</span>\n loopCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n position<span class=\"token punctuation\">:</span> <span class=\"token string\">'left'</span><span class=\"token punctuation\">,</span>\n dist<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span>\n clockwise<span class=\"token punctuation\">:</span> <span class=\"token boolean\">false</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<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token comment\">// ...</span>\n</code></pre></div>","position":{"start":{"line":130,"column":1,"offset":3808},"end":{"line":146,"column":4,"offset":4038}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":147,"column":1,"offset":4039}}}}