@antv/g6
Version:
graph visualization frame work
1 lines • 61.7 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ast-82cc3c31df0b9f258a231456e584c223-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{"id":"什么是-g6"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BB%80%E4%B9%88%E6%98%AF-g6","aria-label":"什么是 g6 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":"什么是 G6","position":{"start":{"line":2,"column":4,"offset":4},"end":{"line":2,"column":10,"offset":10}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":10,"offset":10}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等基础的图可视化能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。","position":{"start":{"line":3,"column":1,"offset":11},"end":{"line":3,"column":77,"offset":87}}}],"position":{"start":{"line":3,"column":1,"offset":11},"end":{"line":3,"column":77,"offset":87}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/gif/174835/1553227950879-b04459d7-9961-4a63-82ad-67037b04fb6d.gif#align=left&display=inline&height=320&name=68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f726d73706f7274616c2f485178596775696e464f4d49587247514f4142592e676966.gif&originHeight=320&originWidth=400&search=&size=1333399&status=done&width=400","alt":"68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f726d73706f7274616c2f485178596775696e464f4d49587247514f4142592e676966.gif"},"children":[],"position":{"start":{"line":5,"column":1,"offset":89},"end":{"line":5,"column":501,"offset":589}}}],"position":{"start":{"line":5,"column":1,"offset":89},"end":{"line":5,"column":501,"offset":589}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"安装--引用"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%AE%89%E8%A3%85--%E5%BC%95%E7%94%A8","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":7,"column":4,"offset":594},"end":{"line":7,"column":11,"offset":601}}}],"position":{"start":{"line":7,"column":1,"offset":591},"end":{"line":7,"column":11,"offset":601}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在项目中引入 G6 有以下两种方式：npm 引入，CDN 引入。","position":{"start":{"line":8,"column":1,"offset":602},"end":{"line":8,"column":33,"offset":634}}}],"position":{"start":{"line":8,"column":1,"offset":602},"end":{"line":8,"column":33,"offset":634}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"1-在项目中使用-npm-包引入"},"children":[{"type":"element","tagName":"a","properties":{"href":"#1-%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8-npm-%E5%8C%85%E5%BC%95%E5%85%A5","aria-label":"1 在项目中使用 npm 包引入 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 在项目中使用 npm 包引入","position":{"start":{"line":10,"column":5,"offset":640},"end":{"line":10,"column":21,"offset":656}}}],"position":{"start":{"line":10,"column":1,"offset":636},"end":{"line":10,"column":21,"offset":656}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Step 1:","position":{"start":{"line":12,"column":3,"offset":660},"end":{"line":12,"column":10,"offset":667}}}],"position":{"start":{"line":12,"column":1,"offset":658},"end":{"line":12,"column":12,"offset":669}}},{"type":"text","value":" 使用命令行在项目目录下执行以下命令：","position":{"start":{"line":12,"column":12,"offset":669},"end":{"line":12,"column":31,"offset":688}}}],"position":{"start":{"line":12,"column":1,"offset":658},"end":{"line":12,"column":31,"offset":688}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"> <span class=\"token function\">npm</span> <span class=\"token function\">install</span> --save @antv/g6</code></pre></div>","position":{"start":{"line":14,"column":1,"offset":690},"end":{"line":16,"column":4,"offset":730}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Step 2:","position":{"start":{"line":18,"column":3,"offset":734},"end":{"line":18,"column":10,"offset":741}}}],"position":{"start":{"line":18,"column":1,"offset":732},"end":{"line":18,"column":12,"offset":743}}},{"type":"text","value":" 在需要用的 G6 的 JS 文件中导入：","position":{"start":{"line":18,"column":12,"offset":743},"end":{"line":18,"column":33,"offset":764}}}],"position":{"start":{"line":18,"column":1,"offset":732},"end":{"line":18,"column":33,"offset":764}}},{"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\">import</span> <span class=\"token constant\">G6</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'@antv/g6'</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":19,"column":1,"offset":765},"end":{"line":21,"column":4,"offset":808}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"2-在-html-中使用-cdn-引入"},"children":[{"type":"element","tagName":"a","properties":{"href":"#2-%E5%9C%A8-html-%E4%B8%AD%E4%BD%BF%E7%94%A8-cdn-%E5%BC%95%E5%85%A5","aria-label":"2 在 html 中使用 cdn 引入 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 在 HTML 中使用 CDN 引入","position":{"start":{"line":23,"column":5,"offset":814},"end":{"line":23,"column":24,"offset":833}}}],"position":{"start":{"line":23,"column":1,"offset":810},"end":{"line":23,"column":24,"offset":833}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></code></pre></div>","position":{"start":{"line":25,"column":1,"offset":835},"end":{"line":27,"column":4,"offset":943}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" 注意 ","position":{"start":{"line":29,"column":1,"offset":945},"end":{"line":29,"column":5,"offset":949}}}],"position":{"start":{"line":29,"column":1,"offset":945},"end":{"line":29,"column":5,"offset":949}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"在 ","position":{"start":{"line":31,"column":3,"offset":953},"end":{"line":31,"column":5,"offset":955}}},{"type":"raw","value":"<code class=\"language-text\">{$version}</code>","position":{"start":{"line":31,"column":5,"offset":955},"end":{"line":31,"column":17,"offset":967}}},{"type":"text","value":" 中填写版本号，例如 ","position":{"start":{"line":31,"column":17,"offset":967},"end":{"line":31,"column":28,"offset":978}}},{"type":"raw","value":"<code class=\"language-text\">3.2.0</code>","position":{"start":{"line":31,"column":28,"offset":978},"end":{"line":31,"column":35,"offset":985}}},{"type":"text","value":"；","position":{"start":{"line":31,"column":35,"offset":985},"end":{"line":31,"column":36,"offset":986}}}],"position":{"start":{"line":31,"column":1,"offset":951},"end":{"line":31,"column":36,"offset":986}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"最新版为 3.2.0，可以在 ","position":{"start":{"line":32,"column":3,"offset":989},"end":{"line":32,"column":18,"offset":1004}}},{"type":"element","tagName":"a","properties":{"href":"https://www.npmjs.com/package/@antv/g6","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"npm","position":{"start":{"line":32,"column":19,"offset":1005},"end":{"line":32,"column":22,"offset":1008}}}],"position":{"start":{"line":32,"column":18,"offset":1004},"end":{"line":32,"column":63,"offset":1049}}},{"type":"text","value":" 查看最新版本；","position":{"start":{"line":32,"column":63,"offset":1049},"end":{"line":32,"column":71,"offset":1057}}}],"position":{"start":{"line":32,"column":1,"offset":987},"end":{"line":32,"column":71,"offset":1057}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"详情参考 Github 分支：","position":{"start":{"line":33,"column":3,"offset":1060},"end":{"line":33,"column":18,"offset":1075}}},{"type":"element","tagName":"a","properties":{"href":"https://github.com/antvis/g6/tree/master","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"https://github.com/antvis/g6/tree/master","position":{"start":{"line":33,"column":19,"offset":1076},"end":{"line":33,"column":59,"offset":1116}}}],"position":{"start":{"line":33,"column":18,"offset":1075},"end":{"line":33,"column":102,"offset":1159}}},{"type":"text","value":" 。","position":{"start":{"line":33,"column":102,"offset":1159},"end":{"line":33,"column":104,"offset":1161}}}],"position":{"start":{"line":33,"column":1,"offset":1058},"end":{"line":33,"column":104,"offset":1161}}},{"type":"text","value":"\n"}],"position":{"start":{"line":31,"column":1,"offset":951},"end":{"line":33,"column":104,"offset":1161}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"快速试用"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%BF%AB%E9%80%9F%E8%AF%95%E7%94%A8","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":35,"column":4,"offset":1166},"end":{"line":35,"column":8,"offset":1170}}}],"position":{"start":{"line":35,"column":1,"offset":1163},"end":{"line":35,"column":8,"offset":1170}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"创建一个 G6 的关系图仅需要下面几个步骤：","position":{"start":{"line":37,"column":1,"offset":1172},"end":{"line":37,"column":23,"offset":1194}}}],"position":{"start":{"line":37,"column":1,"offset":1172},"end":{"line":37,"column":23,"offset":1194}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"创建关系图的 HTML 容器；","position":{"start":{"line":39,"column":4,"offset":1199},"end":{"line":39,"column":19,"offset":1214}}}],"position":{"start":{"line":39,"column":1,"offset":1196},"end":{"line":39,"column":19,"offset":1214}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"数据准备；","position":{"start":{"line":40,"column":4,"offset":1218},"end":{"line":40,"column":9,"offset":1223}}}],"position":{"start":{"line":40,"column":1,"offset":1215},"end":{"line":40,"column":9,"offset":1223}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"创建关系图；","position":{"start":{"line":41,"column":4,"offset":1227},"end":{"line":41,"column":10,"offset":1233}}}],"position":{"start":{"line":41,"column":1,"offset":1224},"end":{"line":41,"column":10,"offset":1233}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"配置数据源，渲染。","position":{"start":{"line":42,"column":4,"offset":1237},"end":{"line":42,"column":13,"offset":1246}}}],"position":{"start":{"line":42,"column":1,"offset":1234},"end":{"line":42,"column":13,"offset":1246}}},{"type":"text","value":"\n"}],"position":{"start":{"line":39,"column":1,"offset":1196},"end":{"line":42,"column":13,"offset":1246}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"step-1-创建容器"},"children":[{"type":"element","tagName":"a","properties":{"href":"#step-1-%E5%88%9B%E5%BB%BA%E5%AE%B9%E5%99%A8","aria-label":"step 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":"Step 1 创建容器","position":{"start":{"line":45,"column":5,"offset":1253},"end":{"line":45,"column":16,"offset":1264}}}],"position":{"start":{"line":45,"column":1,"offset":1249},"end":{"line":45,"column":16,"offset":1264}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为 ","position":{"start":{"line":47,"column":1,"offset":1266},"end":{"line":47,"column":35,"offset":1300}}},{"type":"raw","value":"<code class=\"language-text\">div</code>","position":{"start":{"line":47,"column":35,"offset":1300},"end":{"line":47,"column":40,"offset":1305}}},{"type":"text","value":" 标签。G6 在绘制时会在该容器下追加 ","position":{"start":{"line":47,"column":40,"offset":1305},"end":{"line":47,"column":60,"offset":1325}}},{"type":"raw","value":"<code class=\"language-text\">canvas</code>","position":{"start":{"line":47,"column":60,"offset":1325},"end":{"line":47,"column":68,"offset":1333}}},{"type":"text","value":" 标签，然后将图绘制在其中。","position":{"start":{"line":47,"column":68,"offset":1333},"end":{"line":47,"column":82,"offset":1347}}}],"position":{"start":{"line":47,"column":1,"offset":1266},"end":{"line":47,"column":82,"offset":1347}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>mountNode<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre></div>","position":{"start":{"line":48,"column":1,"offset":1348},"end":{"line":50,"column":4,"offset":1386}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"step-2-数据准备"},"children":[{"type":"element","tagName":"a","properties":{"href":"#step-2-%E6%95%B0%E6%8D%AE%E5%87%86%E5%A4%87","aria-label":"step 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":"Step 2 数据准备","position":{"start":{"line":52,"column":5,"offset":1392},"end":{"line":52,"column":16,"offset":1403}}}],"position":{"start":{"line":52,"column":1,"offset":1388},"end":{"line":52,"column":16,"offset":1403}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点（","position":{"start":{"line":54,"column":1,"offset":1405},"end":{"line":54,"column":34,"offset":1438}}},{"type":"raw","value":"<code class=\"language-text\">nodes</code>","position":{"start":{"line":54,"column":34,"offset":1438},"end":{"line":54,"column":41,"offset":1445}}},{"type":"text","value":"）和边（","position":{"start":{"line":54,"column":41,"offset":1445},"end":{"line":54,"column":45,"offset":1449}}},{"type":"raw","value":"<code class=\"language-text\">edges</code>","position":{"start":{"line":54,"column":45,"offset":1449},"end":{"line":54,"column":52,"offset":1456}}},{"type":"text","value":"）字段，分别用数组表示：","position":{"start":{"line":54,"column":52,"offset":1456},"end":{"line":54,"column":64,"offset":1468}}}],"position":{"start":{"line":54,"column":1,"offset":1405},"end":{"line":54,"column":64,"offset":1468}}},{"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\">// 点集</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\">'node1'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// String，该节点存在则必须，节点的唯一标识</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// Number，可选，节点位置的 x 值</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">200</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// Number，可选，节点位置的 y 值</span>\n <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\">'node2'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// String，该节点存在则必须，节点的唯一标识</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">300</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// Number，可选，节点位置的 x 值</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">200</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// Number，可选，节点位置的 y 值</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 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\">'node1'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// String，必须，起始点 id</span>\n target<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// String，必须，目标点 id</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</code></pre></div>","position":{"start":{"line":56,"column":1,"offset":1470},"end":{"line":74,"column":4,"offset":1891}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" 注意 ","position":{"start":{"line":76,"column":1,"offset":1893},"end":{"line":76,"column":5,"offset":1897}}}],"position":{"start":{"line":76,"column":1,"offset":1893},"end":{"line":76,"column":5,"offset":1897}}},{"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\">nodes</code>","position":{"start":{"line":78,"column":3,"offset":1901},"end":{"line":78,"column":10,"offset":1908}}},{"type":"text","value":" 数组中包含节点对象，唯一的 ","position":{"start":{"line":78,"column":10,"offset":1908},"end":{"line":78,"column":25,"offset":1923}}},{"type":"raw","value":"<code class=\"language-text\">id</code>","position":{"start":{"line":78,"column":25,"offset":1923},"end":{"line":78,"column":29,"offset":1927}}},{"type":"text","value":" 是每个节点对象中必要的属性，","position":{"start":{"line":78,"column":29,"offset":1927},"end":{"line":78,"column":44,"offset":1942}}},{"type":"raw","value":"<code class=\"language-text\">x</code>","position":{"start":{"line":78,"column":44,"offset":1942},"end":{"line":78,"column":47,"offset":1945}}},{"type":"text","value":"、 ","position":{"start":{"line":78,"column":47,"offset":1945},"end":{"line":78,"column":49,"offset":1947}}},{"type":"raw","value":"<code class=\"language-text\">y</code>","position":{"start":{"line":78,"column":49,"offset":1947},"end":{"line":78,"column":52,"offset":1950}}},{"type":"text","value":" 用于定位；","position":{"start":{"line":78,"column":52,"offset":1950},"end":{"line":78,"column":58,"offset":1956}}}],"position":{"start":{"line":78,"column":1,"offset":1899},"end":{"line":78,"column":58,"offset":1956}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"<code class=\"language-text\">edges</code>","position":{"start":{"line":79,"column":3,"offset":1959},"end":{"line":79,"column":10,"offset":1966}}},{"type":"text","value":" 数组中包含边对象，","position":{"start":{"line":79,"column":10,"offset":1966},"end":{"line":79,"column":20,"offset":1976}}},{"type":"raw","value":"<code class=\"language-text\">source</code>","position":{"start":{"line":79,"column":20,"offset":1976},"end":{"line":79,"column":28,"offset":1984}}},{"type":"text","value":" 和 target 是每条边的必要属性，分别代表了该边的起始点 ","position":{"start":{"line":79,"column":28,"offset":1984},"end":{"line":79,"column":60,"offset":2016}}},{"type":"raw","value":"<code class=\"language-text\">id</code>","position":{"start":{"line":79,"column":60,"offset":2016},"end":{"line":79,"column":64,"offset":2020}}},{"type":"text","value":" 与 目标点 ","position":{"start":{"line":79,"column":64,"offset":2020},"end":{"line":79,"column":71,"offset":2027}}},{"type":"raw","value":"<code class=\"language-text\">id</code>","position":{"start":{"line":79,"column":71,"offset":2027},"end":{"line":79,"column":75,"offset":2031}}},{"type":"text","value":"。","position":{"start":{"line":79,"column":75,"offset":2031},"end":{"line":79,"column":76,"offset":2032}}}],"position":{"start":{"line":79,"column":1,"offset":1957},"end":{"line":79,"column":76,"offset":2032}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"点和边的其他属性参见链接：","position":{"start":{"line":80,"column":3,"offset":2035},"end":{"line":80,"column":16,"offset":2048}}},{"type":"element","tagName":"a","properties":{"href":"/zh/docs/api/properties/NodeProperties"},"children":[{"type":"text","value":"图元素配置文档","position":{"start":{"line":80,"column":17,"offset":2049},"end":{"line":80,"column":24,"offset":2056}}}],"position":{"start":{"line":80,"column":16,"offset":2048},"end":{"line":80,"column":65,"offset":2097}}},{"type":"text","value":"。","position":{"start":{"line":80,"column":65,"offset":2097},"end":{"line":80,"column":66,"offset":2098}}}],"position":{"start":{"line":80,"column":1,"offset":2033},"end":{"line":80,"column":66,"offset":2098}}},{"type":"text","value":"\n"}],"position":{"start":{"line":78,"column":1,"offset":1899},"end":{"line":80,"column":66,"offset":2098}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"step-3-创建关系图"},"children":[{"type":"element","tagName":"a","properties":{"href":"#step-3-%E5%88%9B%E5%BB%BA%E5%85%B3%E7%B3%BB%E5%9B%BE","aria-label":"step 3 创建关系图 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":"Step 3 创建关系图","position":{"start":{"line":83,"column":5,"offset":2105},"end":{"line":83,"column":17,"offset":2117}}}],"position":{"start":{"line":83,"column":1,"offset":2101},"end":{"line":83,"column":17,"offset":2117}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"创建关系图（实例化）时，至少需要为图设置容器、宽和高。","position":{"start":{"line":85,"column":1,"offset":2119},"end":{"line":85,"column":28,"offset":2146}}}],"position":{"start":{"line":85,"column":1,"offset":2119},"end":{"line":85,"column":28,"offset":2146}}},{"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> <span class=\"token comment\">// String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身</span>\n width<span class=\"token punctuation\">:</span> <span class=\"token number\">800</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// Number，必须，图的宽度</span>\n height<span class=\"token punctuation\">:</span> <span class=\"token number\">500</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// Number，必须，图的高度</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":87,"column":1,"offset":2148},"end":{"line":93,"column":4,"offset":2367}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"step-4-配置数据源，渲染"},"children":[{"type":"element","tagName":"a","properties":{"href":"#step-4-%E9%85%8D%E7%BD%AE%E6%95%B0%E6%8D%AE%E6%BA%90%EF%BC%8C%E6%B8%B2%E6%9F%93","aria-label":"step 4 配置数据源，渲染 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":"Step 4 配置数据源，渲染","position":{"start":{"line":95,"column":5,"offset":2373},"end":{"line":95,"column":20,"offset":2388}}}],"position":{"start":{"line":95,"column":1,"offset":2369},"end":{"line":95,"column":20,"offset":2388}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<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> <span class=\"token comment\">// 读取 Step 2 中的数据源到图上</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> <span class=\"token comment\">// 渲染图</span>\n</code></pre></div>","position":{"start":{"line":97,"column":1,"offset":2390},"end":{"line":100,"column":4,"offset":2474}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"最终的结果"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%9C%80%E7%BB%88%E7%9A%84%E7%BB%93%E6%9E%9C","aria-label":"最终的结果 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"最终的结果","position":{"start":{"line":102,"column":5,"offset":2480},"end":{"line":102,"column":10,"offset":2485}}}],"position":{"start":{"line":102,"column":1,"offset":2476},"end":{"line":102,"column":10,"offset":2485}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/89796/1547625734035-c211990a-803c-4c6d-87ed-f0096dadb628.png#align=left&display=inline&height=152&name=image.png&originHeight=152&originWidth=337&search=&size=2981&status=done&width=337","alt":"image.png"},"children":[],"position":{"start":{"line":103,"column":1,"offset":2486},"end":{"line":103,"column":239,"offset":2724}}}],"position":{"start":{"line":103,"column":1,"offset":2486},"end":{"line":103,"column":239,"offset":2724}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"完整代码"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81","aria-label":"完整代码 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"完整代码","position":{"start":{"line":105,"column":4,"offset":2729},"end":{"line":105,"column":8,"offset":2733}}}],"position":{"start":{"line":105,"column":1,"offset":2726},"end":{"line":105,"column":8,"offset":2733}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token doctype\"><!DOCTYPE html></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>Tutorial Demo<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span>\n\t<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span>\n /* 图的画布容器 */\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>mountNode<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n \n /* 引入 G6 */\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span>\n \n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\">\n <span class=\"token comment\">// 定义数据源</span>\n <span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 点集</span>\n nodes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</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\">200</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span><span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">300</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">200</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 边集</span>\n edges<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token comment\">// 表示一条从 node1 节点连接到 node2 节点的边</span>\n <span class=\"token punctuation\">{</span>\n source<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n target<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">]</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n \n <span class=\"token comment\">// 创建 G6 图实例</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> <span class=\"token comment\">// 指定图画布的容器 id，与第 9 行的容器对应</span>\n <span class=\"token comment\">// 画布宽高</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\">500</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 读取数据</span>\n graph<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>\n <span class=\"token comment\">// 渲染图</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></code></pre></div>","position":{"start":{"line":107,"column":1,"offset":2735},"end":{"line":158,"column":4,"offset":3713}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"react-中使用-g6"},"children":[{"type":"element","tagName":"a","properties":{"href":"#react-%E4%B8%AD%E4%BD%BF%E7%94%A8-g6","aria-label":"react 中使用 g6 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":"React 中使用 G6","position":{"start":{"line":160,"column":4,"offset":3718},"end":{"line":160,"column":16,"offset":3730}}}],"position":{"start":{"line":160,"column":1,"offset":3715},"end":{"line":160,"column":16,"offset":3730}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"你是在 React 中使用 G6 吗？我们提供了在 React 中使用 G6 的 ","position":{"start":{"line":161,"column":1,"offset":3731},"end":{"line":161,"column":42,"offset":3772}}},{"type":"element","tagName":"a","properties":{"href":"https://github.com/baizn/g6-in-react","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Demo","position":{"start":{"line":161,"column":43,"offset":3773},"end":{"line":161,"column":47,"offset":3777}}}],"position":{"start":{"line":161,"column":42,"offset":3772},"end":{"line":161,"column":86,"offset":3816}}}],"position":{"start":{"line":161,"column":1,"offset":3731},"end":{"line":161,"column":86,"offset":3816}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"更多关于 React 中如何使用 G6，请参考","position":{"start":{"line":163,"column":1,"offset":3818},"end":{"line":163,"column":24,"offset":3841}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/zmfur7","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"React 中使用 G6 的文档","position":{"start":{"line":163,"column":25,"offset":3842},"end":{"line":163,"column":41,"offset":3858}}}],"position":{"start":{"line":163,"column":24,"offset":3841},"end":{"line":163,"column":80,"offset":3897}}},{"type":"text","value":"，有任何问题都可以通过页面底部的钉钉交流群和我们沟通，也非常欢迎给我们提 ","position":{"start":{"line":163,"column":80,"offset":3897},"end":{"line":163,"column":117,"offset":3934}}},{"type":"element","tagName":"a","properties":{"href":"https://github.com/antvis/g6/issues","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Issues","position":{"start":{"line":163,"column":118,"offset":3935},"end":{"line":163,"column":124,"offset":3941}}}],"position":{"start":{"line":163,"column":117,"offset":3934},"end":{"line":163,"column":162,"offset":3979}}},{"type":"text","value":"。","position":{"start":{"line":163,"column":162,"offset":3979},"end":{"line":163,"column":163,"offset":3980}}}],"position":{"start":{"line":163,"column":1,"offset":3818},"end":{"line":163,"column":163,"offset":3980}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"更多"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%9B%B4%E5%A4%9A","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":166,"column":4,"offset":3986},"end":{"line":166,"column":6,"offset":3988}}}],"position":{"start":{"line":166,"column":1,"offset":3983},"end":{"line":166,"column":6,"offset":3988}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"本章仅仅介绍了如何安装以及最简单的场景，在 G6 Tutorial 中其他的章节中我们会教会你：","position":{"start":{"line":167,"column":1,"offset":3989},"end":{"line":167,"column":49,"offset":4037}}}],"position":{"start":{"line":167,"column":1,"offset":3989},"end":{"line":167,"column":49,"offset":4037}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"实例化图时的常见配置；","position":{"start":{"line":169,"column":3,"offset":4041},"end":{"line":169,"column":14,"offset":4052}}}],"position":{"start":{"line":169,"column":1,"offset":4039},"end":{"line":169,"column":14,"offset":4052}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"设置元素（节点/边）属性、样式；","position":{"start":{"line":170,"column":3,"offset":4055},"end":{"line":170,"column":19,"offset":4071}}}],"position":{"start":{"line":170,"column":1,"offset":4053},"end":{"line":170,"column":19,"offset":4071}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"设置布局；","position":{"start":{"line":171,"column":3,"offset":4074},"end":{"line":171,"column":8,"offset":4079}}}],"position":{"start":{"line":171,"column":1,"offset":4072},"end":{"line":171,"column":8,"offset":4079}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"增加交互；","position":{"start":{"line":172,"column":3,"offset":4082},"end":{"line":172,"column":8,"offset":4087}}}],"position":{"start":{"line":172,"column":1,"offset":4080},"end":{"line":172,"column":8,"offset":4087}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"增加动画；","position":{"start":{"line":173,"column":3,"offset":4090},"end":{"line":173,"column":8,"offset":4095}}}],"position":{"start":{"line":173,"column":1,"offset":4088},"end":{"line":173,"column":8,"offset":4095}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"使用辅助组件。","position":{"start":{"line":174,"column":3,"offset":4098},"end":{"line":174,"column":10,"offset":4105}}}],"position":{"start":{"line":174,"column":1,"offset":4096},"end":{"line":174,"column":10,"offset":4105}}},{"type":"text","value":"\n"}],"position":{"start":{"line":169,"column":1,"offset":4039},"end":{"line":174,"column":10,"offset":4105}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"想了解更高阶的功能，请参见 ","position":{"start":{"line":176,"column":1,"offset":4107},"end":{"line":176,"column":15,"offset":4121}}},{"type":"element","tagName":"a","properties":{"href":"/zh/docs/manual/middle/keyConcept"},"children":[{"type":"text","value":"G6 核心概念","position":{"start":{"line":176,"column":16,"offset":4122},"end":{"line":176,"column":23,"offset":4129}}}],"position":{"start":{"line":176,"column":15,"offset":4121},"end":{"line":176,"column":59,"offset":4165}}},{"type":"text","value":"，","position":{"start":{"line":176,"column":59,"offset":4165},"end":{"line":176,"column":60,"offset":4166}}},{"type":"element","tagName":"a","properties":{"href":"/zh/docs/manual/advanced/shape-and-properties"},"children":[{"type":"text","value":"G6 高级指引","position":{"start":{"line":176,"column":61,"offset":4167},"end":{"line":176,"column":68,"offset":4174}}}],"position":{"start":{"line":176,"column":60,"offset":4166},"end":{"line":176,"column":116,"offset":4222}}},{"type":"text","value":"。","position":{"start":{"line":176,"column":116,"offset":4222},"end":{"line":176,"column":117,"offset":4223}}}],"position":{"start":{"line":176,"column":1,"offset":4107},"end":{"line":176,"column":117,"offset":4223}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"友情链接"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%8F%8B%E6%83%85%E9%93%BE%E6%8E%A5","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":178,"column":4,"offset":4228},"end":{"line":178,"column":8,"offset":4232}}}],"position":{"start":{"line":178,"column":1,"offset":4225},"end":{"line":178,"column":8,"offset":4232}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"结合前端库的第三方实现：","position":{"start":{"line":179,"column":1,"offset":4233},"end":{"line":179,"column":13,"offset":4245}}}],"position":{"start":{"line":179,"column":1,"offset":4233},"end":{"line":179,"column":13,"offset":4245}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/guozhaolong/wfd","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"基于 G6 和 React 的可视化流程编辑器","position":{"start":{"line":181,"column":4,"offset":4250},"end":{"line":181,"column":27,"offset":4273}}}],"position":{"start":{"line":181,"column":3,"offset":4249},"end":{"line":181,"column":64,"offset":4310}}},{"type":"text","value":" - ","position":{"start":{"line":181,"column":64,"offset":4310},"end":{"line":181,"column":67,"offset":4313}}},{"type":"element","tagName":"a","properties":{"href":"https://github.com/guozhaolong/wfd","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Workflow Designer","position":{"start":{"line":181,"column":68,"offset":4314},"end":{"line":181,"column":85,"offset":4331}}}],"position":{"start":{"line":181,"column":67,"offset":4313},"end":{"line":181,"column":122,"offset":4368}}},{"type":"text","value":"；","position":{"start":{"line":181,"column":122,"offset":4368},"end":{"line":181,"column":123,"offset":4369}}}],"position":{"start":{"line":181,"column":1,"offset":4247},"end":{"line":181,"column":123,"offset":4369}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/caoyu48/vue-g6-editor","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"基于 G6 和 Vue 的可视化编辑器","position":{"start":{"line":182,"column":4,"offset":4373},"end":{"line":182,"column":23,"offset":4392}}}],"position":{"start":{"line":182,"column":3,"offset":4372},"end":{"line":182,"column":66,"offset":4435}}},{"type":"text","value":"；","position":{"start":{"line":182,"column":66,"offset":4435},"end":{"line":182,"column":67,"offset":4436}}}],"position":{"start":{"line":182,"column":1,"offset":4370},"end":{"line":182,"column":67,"offset":4436}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/OXOYO/X-Flowchart-Vue","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"基于 G6 和 Vue 的可视化图形编辑器","position":{"start":{"line":183,"column":4,"offset":4440},"end":{"line":183,"column":25,"offset":4461}}}],"position":{"start":{"line":183,"column":3,"offset":4439},"end":{"line":183,"column":68,"offset":4504}}},{"type":"text","value":" - ","position":{"start":{"line":183,"column":68,"offset":4504},"end":{"line":183,"column":71,"offset":4507}}},{"type":"element","tagName":"a","properties":{"href":"https://github.com/OXOYO/X-Flowchart-Vue","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"A visual graph editor based on G6 and Vue","position":{"start":{"line":183,"column":72,"offset":4508},"end":{"line":183,"column":113,"offset":4549}}}],"position":{"start":{"line":183,"column":71,"offset":4507},"end":{"line":183,"column":156,"offset":4592}}},{"type":"text","value":"。","position":{"start":{"line":183,"column":156,"offset":4592},"end":{"line":183,"column":157,"offset":4593}}}],"position":{"start":{"line":183,"column":1,"offset":4437},"end":{"line":183,"column":157,"offset":4593}}},{"type":"text","value":"\n"}],"position":{"start":{"line":181,"column":1,"offset":4247},"end":{"line":183,"column":157,"offset":4593}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"g6-图可视化交流群"},"children":[{"type":"element","tagName":"a","properties":{"href":"#g6-%E5%9B%BE%E5%8F%AF%E8%A7%86%E5%8C%96%E4%BA%A4%E6%B5%81%E7%BE%A4","aria-label":"g6 图可视化交流群 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":"G6 图可视化交流群","position":{"start":{"line":186,"column":4,"offset":4599},"end":{"line":186,"column":14,"offset":4609}}}],"position":{"start":{"line":186,"column":1,"offset":4596},"end":{"line":186,"column":14,"offset":4609}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"欢迎各界 G6 使用者、图可视化爱好者加入 ","position":{"start":{"line":187,"column":1,"offset":4610},"end":{"line":187,"column":23,"offset":4632}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"G6 图可视化交流群","position":{"start":{"line":187,"column":25,"offset":4634},"end":{"line":187,"column":35,"offset":4644}}}],"position":{"start":{"line":187,"column":23,"offset":4632},"end":{"line":187,"column":37,"offset":4646}}},{"type":"text","value":"（钉钉群，使用钉钉扫一扫加入）讨论与交流。\n","position":{"start":{"line":187,"column":37,"offset":4646},"end":{"line":188,"column":1,"offset":4668}}},{"type":"raw","value":"<br />","position":{"start":{"line":188,"column":1,"offset":4668},"end":{"line":188,"column":7,"offset":4674}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/156681/1569834117258-cda482fc-d121-4107-9236-1ef1ee1f0758.png#align=left&display=inline&height=495&name=image.png&originHeight=990&originWidth=750&search=&size=185140&status=done&width=375","alt":"image.png"},"children":[],"position":{"start":{"line":188,"column":7,"offset":4674},"end":{"line":188,"column":248,"offset":4915}}}],"position":{"start":{"line":187,"column":1,"offset":4610},"end":{"line":188,"column":248,"offset":4915}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" 提示 ","position":{"start":{"line":190,"column":1,"offset":4917},"end":{"line":190,"column":5,"offset":4921}}}],"position":{"start":{"line":190,"column":1,"offset":4917},"end":{"line":190,"column":5,"offset":4921}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"3.2 版本已经放出，会根据我们支持的业务，不断完善 demo；","position":{"start":{"line":192,"column":3,"offset":4925},"end":{"line":192,"column":35,"offset":4957}}}],"position":{"start":{"line":192,"column":1,"offset":4923},"end":{"line":192,"column":35,"offset":4957}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"欢迎提出各种建议，同时参与我们的开发；","position":{"start":{"line":193,"column":3,"offset":4960},"end":{"line":193,"column":22,"offset":4979}}}],"position":{"start":{"line":193,"column":1,"offset":4958},"end":{"line":193,"column":22,"offset":4979}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"开源不易，关系图开发更不易，敬请互相体谅。","position":{"start":{"line":194,"column":3,"offset":4982},"end":{"line":194,"column":24,"offset":5003}}}],"position":{"start":{"line":194,"column":1,"offset":4980},"end":{"line":194,"column":24,"offset":5003}}},{"type":"text","value":"\n"}],"position":{"start":{"line":192,"column":1,"offset":4923},"end":{"line":194,"column":24,"offset":5003}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":195,"column":1,"offset":5004}}}}