{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-ast-a24948befeef82fe6e1a9447a1629348-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"本文将进行 ","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":7,"offset":7},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"Tutorial案例","position":{"start":{"line":2,"column":9,"offset":9},"end":{"line":2,"column":19,"offset":19},"indent":[]}}],"position":{"start":{"line":2,"column":7,"offset":7},"end":{"line":2,"column":21,"offset":21},"indent":[]}},{"type":"text","value":"的简单绘制和配置。通过本文，你将知道创建一般图时一些常用的配置项及其作用。","position":{"start":{"line":2,"column":21,"offset":21},"end":{"line":2,"column":58,"offset":58},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":58,"offset":58},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#基础绘制","title":null,"children":[],"data":{"hProperties":{"aria-label":"基础绘制 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]}},{"type":"text","value":"基础绘制","position":{"start":{"line":4,"column":4,"offset":63},"end":{"line":4,"column":8,"offset":67},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":60},"end":{"line":4,"column":8,"offset":67},"indent":[]},"data":{"id":"基础绘制","htmlAttributes":{"id":"基础绘制"},"hProperties":{"id":"基础绘制"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#创建容器","title":null,"children":[],"data":{"hProperties":{"aria-label":"创建容器 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]}},{"type":"text","value":"创建容器","position":{"start":{"line":5,"column":5,"offset":72},"end":{"line":5,"column":9,"offset":76},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":68},"end":{"line":5,"column":9,"offset":76},"indent":[]},"data":{"id":"创建容器","htmlAttributes":{"id":"创建容器"},"hProperties":{"id":"创建容器"}}},{"type":"paragraph","children":[{"type":"text","value":"需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为 ","position":{"start":{"line":6,"column":1,"offset":77},"end":{"line":6,"column":35,"offset":111},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">div</code>","position":{"start":{"line":6,"column":35,"offset":111},"end":{"line":6,"column":40,"offset":116},"indent":[]}},{"type":"text","value":" 标签。G6 在绘制时会在该容器下追加 ","position":{"start":{"line":6,"column":40,"offset":116},"end":{"line":6,"column":60,"offset":136},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">canvas</code>","position":{"start":{"line":6,"column":60,"offset":136},"end":{"line":6,"column":68,"offset":144},"indent":[]}},{"type":"text","value":" 标签，然后将图绘制在其中。","position":{"start":{"line":6,"column":68,"offset":144},"end":{"line":6,"column":82,"offset":158},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":77},"end":{"line":6,"column":82,"offset":158},"indent":[]}},{"type":"html","lang":"html","meta":null,"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\">&lt;</span>body</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>mountNode<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n  \n  <span class=\"token comment\">&lt;!-- 引入 G6 --></span>\n  <span class=\"token comment\">&lt;!-- ... --></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>body</span><span class=\"token punctuation\">></span></span></code></pre></div>","position":{"start":{"line":7,"column":1,"offset":159},"end":{"line":15,"column":4,"offset":250},"indent":[1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#数据准备","title":null,"children":[],"data":{"hProperties":{"aria-label":"数据准备 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]}},{"type":"text","value":"数据准备","position":{"start":{"line":17,"column":5,"offset":256},"end":{"line":17,"column":9,"offset":260},"indent":[]}}],"position":{"start":{"line":17,"column":1,"offset":252},"end":{"line":17,"column":9,"offset":260},"indent":[]},"data":{"id":"数据准备","htmlAttributes":{"id":"数据准备"},"hProperties":{"id":"数据准备"}}},{"type":"paragraph","children":[{"type":"text","value":"引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点（","position":{"start":{"line":18,"column":1,"offset":261},"end":{"line":18,"column":34,"offset":294},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">nodes</code>","position":{"start":{"line":18,"column":34,"offset":294},"end":{"line":18,"column":41,"offset":301},"indent":[]}},{"type":"text","value":"）和边（","position":{"start":{"line":18,"column":41,"offset":301},"end":{"line":18,"column":45,"offset":305},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">edges</code>","position":{"start":{"line":18,"column":45,"offset":305},"end":{"line":18,"column":52,"offset":312},"indent":[]}},{"type":"text","value":"）字段，分别用数组表示：","position":{"start":{"line":18,"column":52,"offset":312},"end":{"line":18,"column":64,"offset":324},"indent":[]}}],"position":{"start":{"line":18,"column":1,"offset":261},"end":{"line":18,"column":64,"offset":324},"indent":[]}},{"type":"html","lang":"html","meta":null,"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\">&lt;</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\">\n  <span class=\"token comment\">// console.log(G6.Global.version);</span>\n  <span class=\"token keyword\">const</span> initData <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> <span class=\"token comment\">// 节点的唯一标识</span>\n      x<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span>      <span class=\"token comment\">// 节点横坐标</span>\n      y<span class=\"token punctuation\">:</span> <span class=\"token number\">200</span><span class=\"token punctuation\">,</span>      <span class=\"token comment\">// 节点纵坐标</span>\n      label<span class=\"token punctuation\">:</span> <span class=\"token string\">'起始点'</span> <span class=\"token comment\">// 节点文本</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><span class=\"token punctuation\">,</span>\n      label<span class=\"token punctuation\">:</span> <span class=\"token string\">'目标点'</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>  <span class=\"token comment\">// 起始点 id</span>\n        target<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span><span class=\"token punctuation\">,</span>  <span class=\"token comment\">// 目标点 id</span>\n        label<span class=\"token punctuation\">:</span> <span class=\"token string\">'我是连线'</span>   <span class=\"token comment\">// 边的文本</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</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span></code></pre></div>","position":{"start":{"line":19,"column":1,"offset":325},"end":{"line":46,"column":4,"offset":823},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":" ","position":{"start":{"line":48,"column":1,"offset":825},"end":{"line":48,"column":2,"offset":826},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">注意</code>","position":{"start":{"line":48,"column":2,"offset":826},"end":{"line":48,"column":6,"offset":830},"indent":[]}}],"position":{"start":{"line":48,"column":1,"offset":825},"end":{"line":48,"column":6,"offset":830},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"<code class=\"language-text\">nodes</code>","position":{"start":{"line":50,"column":3,"offset":834},"end":{"line":50,"column":10,"offset":841},"indent":[]}},{"type":"text","value":" 数组中包含节点对象，唯一的 ","position":{"start":{"line":50,"column":10,"offset":841},"end":{"line":50,"column":25,"offset":856},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">id</code>","position":{"start":{"line":50,"column":25,"offset":856},"end":{"line":50,"column":29,"offset":860},"indent":[]}},{"type":"text","value":" 是每个节点对象中必要的属性，","position":{"start":{"line":50,"column":29,"offset":860},"end":{"line":50,"column":44,"offset":875},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">x</code>","position":{"start":{"line":50,"column":44,"offset":875},"end":{"line":50,"column":47,"offset":878},"indent":[]}},{"type":"text","value":"、 ","position":{"start":{"line":50,"column":47,"offset":878},"end":{"line":50,"column":49,"offset":880},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">y</code>","position":{"start":{"line":50,"column":49,"offset":880},"end":{"line":50,"column":52,"offset":883},"indent":[]}},{"type":"text","value":" 用于定位；","position":{"start":{"line":50,"column":52,"offset":883},"end":{"line":50,"column":58,"offset":889},"indent":[]}}],"position":{"start":{"line":50,"column":3,"offset":834},"end":{"line":50,"column":58,"offset":889},"indent":[]}}],"position":{"start":{"line":50,"column":1,"offset":832},"end":{"line":50,"column":58,"offset":889},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"<code class=\"language-text\">edges</code>","position":{"start":{"line":51,"column":3,"offset":892},"end":{"line":51,"column":10,"offset":899},"indent":[]}},{"type":"text","value":" 数组中包含边对象，","position":{"start":{"line":51,"column":10,"offset":899},"end":{"line":51,"column":20,"offset":909},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">source</code>","position":{"start":{"line":51,"column":20,"offset":909},"end":{"line":51,"column":28,"offset":917},"indent":[]}},{"type":"text","value":" 和 ","position":{"start":{"line":51,"column":28,"offset":917},"end":{"line":51,"column":31,"offset":920},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">target</code>","position":{"start":{"line":51,"column":31,"offset":920},"end":{"line":51,"column":39,"offset":928},"indent":[]}},{"type":"text","value":" 是每条边的必要属性，分别代表了该边的起始点 ","position":{"start":{"line":51,"column":39,"offset":928},"end":{"line":51,"column":62,"offset":951},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">id</code>","position":{"start":{"line":51,"column":62,"offset":951},"end":{"line":51,"column":66,"offset":955},"indent":[]}},{"type":"text","value":" 与 目标点 ","position":{"start":{"line":51,"column":66,"offset":955},"end":{"line":51,"column":73,"offset":962},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">id</code>","position":{"start":{"line":51,"column":73,"offset":962},"end":{"line":51,"column":77,"offset":966},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":51,"column":77,"offset":966},"end":{"line":51,"column":78,"offset":967},"indent":[]}}],"position":{"start":{"line":51,"column":3,"offset":892},"end":{"line":51,"column":78,"offset":967},"indent":[]}}],"position":{"start":{"line":51,"column":1,"offset":890},"end":{"line":51,"column":78,"offset":967},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"点和边的更多属性参见：","position":{"start":{"line":52,"column":3,"offset":970},"end":{"line":52,"column":14,"offset":981},"indent":[]}},{"type":"link","title":null,"url":"../middle/elements/defaultNode","children":[{"type":"text","value":"内置的节点","position":{"start":{"line":52,"column":15,"offset":982},"end":{"line":52,"column":20,"offset":987},"indent":[]}}],"position":{"start":{"line":52,"column":14,"offset":981},"end":{"line":52,"column":53,"offset":1020},"indent":[]}},{"type":"text","value":"，","position":{"start":{"line":52,"column":53,"offset":1020},"end":{"line":52,"column":54,"offset":1021},"indent":[]}},{"type":"link","title":null,"url":"../middle/elements/defaultEdge","children":[{"type":"text","value":"内置的边","position":{"start":{"line":52,"column":55,"offset":1022},"end":{"line":52,"column":59,"offset":1026},"indent":[]}}],"position":{"start":{"line":52,"column":54,"offset":1021},"end":{"line":52,"column":92,"offset":1059},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":52,"column":92,"offset":1059},"end":{"line":52,"column":93,"offset":1060},"indent":[]}}],"position":{"start":{"line":52,"column":3,"offset":970},"end":{"line":52,"column":93,"offset":1060},"indent":[]}}],"position":{"start":{"line":52,"column":1,"offset":968},"end":{"line":52,"column":93,"offset":1060},"indent":[]}}],"position":{"start":{"line":50,"column":1,"offset":832},"end":{"line":52,"column":93,"offset":1060},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#图实例化","title":null,"children":[],"data":{"hProperties":{"aria-label":"图实例化 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]}},{"type":"text","value":"图实例化","position":{"start":{"line":54,"column":5,"offset":1066},"end":{"line":54,"column":9,"offset":1070},"indent":[]}}],"position":{"start":{"line":54,"column":1,"offset":1062},"end":{"line":54,"column":9,"offset":1070},"indent":[]},"data":{"id":"图实例化","htmlAttributes":{"id":"图实例化"},"hProperties":{"id":"图实例化"}}},{"type":"paragraph","children":[{"type":"text","value":"图实例化时，至少需要为图设置容器、宽、高：","position":{"start":{"line":55,"column":1,"offset":1071},"end":{"line":55,"column":22,"offset":1092},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":1071},"end":{"line":55,"column":22,"offset":1092},"indent":[]}},{"type":"html","lang":"html","meta":null,"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\">&lt;</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\">\n  <span class=\"token comment\">// const initData = { ... }</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\">// 指定挂载容器</span>\n    width<span class=\"token punctuation\">:</span> <span class=\"token number\">800</span><span class=\"token punctuation\">,</span>             <span class=\"token comment\">// 图的宽度</span>\n    height<span class=\"token punctuation\">:</span> <span class=\"token number\">500</span>             <span class=\"token comment\">// 图的高度</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span></code></pre></div>","position":{"start":{"line":56,"column":1,"offset":1093},"end":{"line":65,"column":4,"offset":1300},"indent":[1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#图的渲染","title":null,"children":[],"data":{"hProperties":{"aria-label":"图的渲染 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]}},{"type":"text","value":"图的渲染","position":{"start":{"line":67,"column":5,"offset":1306},"end":{"line":67,"column":9,"offset":1310},"indent":[]}}],"position":{"start":{"line":67,"column":1,"offset":1302},"end":{"line":67,"column":9,"offset":1310},"indent":[]},"data":{"id":"图的渲染","htmlAttributes":{"id":"图的渲染"},"hProperties":{"id":"图的渲染"}}},{"type":"paragraph","children":[{"type":"text","value":"数据的加载和图的渲染是两个步骤，可以分开进行。","position":{"start":{"line":68,"column":1,"offset":1311},"end":{"line":68,"column":24,"offset":1334},"indent":[]}}],"position":{"start":{"line":68,"column":1,"offset":1311},"end":{"line":68,"column":24,"offset":1334},"indent":[]}},{"type":"html","lang":"html","meta":null,"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\">&lt;</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\">\n  <span class=\"token comment\">// const initData = { ... }</span>\n  <span class=\"token comment\">//  const graph = ...</span>\n  graph<span class=\"token punctuation\">.</span><span class=\"token function\">data</span><span class=\"token punctuation\">(</span>initData<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>  <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>        <span class=\"token comment\">// 渲染</span>\n</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span></code></pre></div>","position":{"start":{"line":69,"column":1,"offset":1335},"end":{"line":76,"column":4,"offset":1483},"indent":[1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#绘制结果","title":null,"children":[],"data":{"hProperties":{"aria-label":"绘制结果 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]}},{"type":"text","value":"绘制结果","position":{"start":{"line":78,"column":5,"offset":1489},"end":{"line":78,"column":9,"offset":1493},"indent":[]}}],"position":{"start":{"line":78,"column":1,"offset":1485},"end":{"line":78,"column":9,"offset":1493},"indent":[]},"data":{"id":"绘制结果","htmlAttributes":{"id":"绘制结果"},"hProperties":{"id":"绘制结果"}}},{"type":"paragraph","children":[{"type":"text","value":"调用 ","position":{"start":{"line":79,"column":1,"offset":1494},"end":{"line":79,"column":4,"offset":1497},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">graph.render()</code>","position":{"start":{"line":79,"column":4,"offset":1497},"end":{"line":79,"column":20,"offset":1513},"indent":[]}},{"type":"text","value":" 方法之后，G6 引擎会根据加载的数据进行图的绘制。如果没有额外指定图实例的 renderer 属性配置，则默认采用 Canvas 进行绘制，结果如下：","position":{"start":{"line":79,"column":20,"offset":1513},"end":{"line":79,"column":96,"offset":1589},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":79,"column":96,"offset":1589},"end":{"line":79,"column":102,"offset":1595},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1571051400528-c0c31bcb-1de9-4e6f-bd17-03737f939ef9.png#align=left&display=inline&height=178&name=image.png&originHeight=178&originWidth=340&search=&size=5910&status=done&width=340","alt":"image.png","position":{"start":{"line":79,"column":102,"offset":1595},"end":{"line":79,"column":341,"offset":1834},"indent":[]}}],"position":{"start":{"line":79,"column":1,"offset":1494},"end":{"line":79,"column":341,"offset":1834},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#真实数据加载","title":null,"children":[],"data":{"hProperties":{"aria-label":"真实数据加载 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]}},{"type":"text","value":"真实数据加载","position":{"start":{"line":81,"column":4,"offset":1839},"end":{"line":81,"column":10,"offset":1845},"indent":[]}}],"position":{"start":{"line":81,"column":1,"offset":1836},"end":{"line":81,"column":10,"offset":1845},"indent":[]},"data":{"id":"真实数据加载","htmlAttributes":{"id":"真实数据加载"},"hProperties":{"id":"真实数据加载"}}},{"type":"paragraph","children":[{"type":"text","value":"上文中，我们使用了仅含有两个节点和一条边的数据，直接将数据定义放在了代码中。而真实场景的数据通常是远程接口请求加载的。为了方便，我们已经给读者准备好了一份 json 数据文件，地址如下：","position":{"start":{"line":82,"column":1,"offset":1846},"end":{"line":82,"column":94,"offset":1939},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":82,"column":94,"offset":1939},"end":{"line":82,"column":100,"offset":1945},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json</code>","position":{"start":{"line":82,"column":100,"offset":1945},"end":{"line":82,"column":189,"offset":2034},"indent":[]}}],"position":{"start":{"line":82,"column":1,"offset":1846},"end":{"line":82,"column":189,"offset":2034},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#加载远程数据","title":null,"children":[],"data":{"hProperties":{"aria-label":"加载远程数据 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]}},{"type":"text","value":"加载远程数据","position":{"start":{"line":84,"column":5,"offset":2040},"end":{"line":84,"column":11,"offset":2046},"indent":[]}}],"position":{"start":{"line":84,"column":1,"offset":2036},"end":{"line":84,"column":11,"offset":2046},"indent":[]},"data":{"id":"加载远程数据","htmlAttributes":{"id":"加载远程数据"},"hProperties":{"id":"加载远程数据"}}},{"type":"paragraph","children":[{"type":"text","value":"修改 index.html，通过 ","position":{"start":{"line":85,"column":1,"offset":2047},"end":{"line":85,"column":18,"offset":2064},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">fetch</code>","position":{"start":{"line":85,"column":18,"offset":2064},"end":{"line":85,"column":25,"offset":2071},"indent":[]}},{"type":"text","value":" 函数异步加载远程的数据源，并传入 G6 的图实例中：","position":{"start":{"line":85,"column":25,"offset":2071},"end":{"line":85,"column":52,"offset":2098},"indent":[]}}],"position":{"start":{"line":85,"column":1,"offset":2047},"end":{"line":85,"column":52,"offset":2098},"indent":[]}},{"type":"html","lang":"html","meta":null,"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\">&lt;</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\">\n  <span class=\"token comment\">//  const graph = ...</span>\n  <span class=\"token keyword\">const</span> <span class=\"token function-variable function\">main</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">async</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">const</span> response <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span><span class=\"token string\">'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">const</span> remoteData <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> response<span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    \n    <span class=\"token comment\">// ...</span>\n    graph<span class=\"token punctuation\">.</span><span class=\"token function\">data</span><span class=\"token punctuation\">(</span>remoteData<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <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>         <span class=\"token comment\">// 渲染</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n  <span class=\"token function\">main</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span></code></pre></div>","position":{"start":{"line":86,"column":1,"offset":2099},"end":{"line":99,"column":4,"offset":2456},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"fetch 函数允许我们发起网络请求，加载数据，而其异步的过程可以通过 async/await 进行更合理的控制。这里我们为了方便起见，将主要逻辑放在了 main 函数里面。如果读者对 fetch 和 async/await 的知识有疑问，可以参考：","position":{"start":{"line":100,"column":3,"offset":2459},"end":{"line":100,"column":128,"offset":2584},"indent":[]}},{"type":"link","title":null,"url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function","children":[{"type":"text","value":"async function","position":{"start":{"line":100,"column":129,"offset":2585},"end":{"line":100,"column":143,"offset":2599},"indent":[]}}],"position":{"start":{"line":100,"column":128,"offset":2584},"end":{"line":100,"column":237,"offset":2693},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"，","position":{"start":{"line":100,"column":237,"offset":2693},"end":{"line":100,"column":238,"offset":2694},"indent":[]}},{"type":"link","title":null,"url":"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API","children":[{"type":"text","value":"Fetch API","position":{"start":{"line":100,"column":239,"offset":2695},"end":{"line":100,"column":248,"offset":2704},"indent":[]}}],"position":{"start":{"line":100,"column":238,"offset":2694},"end":{"line":100,"column":309,"offset":2765},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":100,"column":3,"offset":2459},"end":{"line":100,"column":309,"offset":2765},"indent":[]}}],"position":{"start":{"line":100,"column":1,"offset":2457},"end":{"line":100,"column":309,"offset":2765},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"运行后，我们得到了下图结果：","position":{"start":{"line":103,"column":1,"offset":2768},"end":{"line":103,"column":15,"offset":2782},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":103,"column":15,"offset":2782},"end":{"line":103,"column":21,"offset":2788},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1571051484453-6b192934-7ea3-4229-bd4d-95d6015027a6.png#align=left&display=inline&height=308&name=image.png&originHeight=1258&originWidth=1652&search=&size=387500&status=done&width=404","alt":"image.png","position":{"start":{"line":103,"column":21,"offset":2788},"end":{"line":103,"column":264,"offset":3031},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":103,"column":264,"offset":3031},"end":{"line":103,"column":270,"offset":3037},"indent":[]}},{"type":"text","value":"乍看之下，图像有点奇怪，实际上数据已经正确的加载了进来。由于数据量比较大，节点和边都非常的多，显得内容比较杂乱。另外由于画布大小的限制，实际的图被画布截断了，目前只能看见部分内容，这个问题后文会继续解决。","position":{"start":{"line":103,"column":270,"offset":3037},"end":{"line":103,"column":372,"offset":3139},"indent":[]}}],"position":{"start":{"line":103,"column":1,"offset":2768},"end":{"line":103,"column":372,"offset":3139},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"请看下面摘取自 tutorial-data.json 的部分数据，我们发现数据中节点定义了位置信息 ","position":{"start":{"line":105,"column":1,"offset":3141},"end":{"line":105,"column":51,"offset":3191},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">x</code>","position":{"start":{"line":105,"column":51,"offset":3191},"end":{"line":105,"column":54,"offset":3194},"indent":[]}},{"type":"text","value":" 与 ","position":{"start":{"line":105,"column":54,"offset":3194},"end":{"line":105,"column":57,"offset":3197},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">y</code>","position":{"start":{"line":105,"column":57,"offset":3197},"end":{"line":105,"column":60,"offset":3200},"indent":[]}},{"type":"text","value":"，并且很多节点的 ","position":{"start":{"line":105,"column":60,"offset":3200},"end":{"line":105,"column":69,"offset":3209},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">x</code>","position":{"start":{"line":105,"column":69,"offset":3209},"end":{"line":105,"column":72,"offset":3212},"indent":[]}},{"type":"text","value":" 和 ","position":{"start":{"line":105,"column":72,"offset":3212},"end":{"line":105,"column":75,"offset":3215},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">y</code>","position":{"start":{"line":105,"column":75,"offset":3215},"end":{"line":105,"column":78,"offset":3218},"indent":[]}},{"type":"text","value":" 不在图的宽高（","position":{"start":{"line":105,"column":78,"offset":3218},"end":{"line":105,"column":86,"offset":3226},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">width: 800, height: 600</code>","position":{"start":{"line":105,"column":86,"offset":3226},"end":{"line":105,"column":111,"offset":3251},"indent":[]}},{"type":"text","value":"）范围内：","position":{"start":{"line":105,"column":111,"offset":3251},"end":{"line":105,"column":116,"offset":3256},"indent":[]}}],"position":{"start":{"line":105,"column":1,"offset":3141},"end":{"line":105,"column":116,"offset":3256},"indent":[]}},{"type":"html","lang":"json","meta":null,"value":"<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">\"nodes\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token punctuation\">{</span><span class=\"token property\">\"id\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"0\"</span><span class=\"token punctuation\">,</span> <span class=\"token property\">\"label\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"n0\"</span><span class=\"token punctuation\">,</span> <span class=\"token property\">\"class\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"c0\"</span><span class=\"token punctuation\">,</span><span class=\"token property\">\"x\"</span><span class=\"token operator\">:</span> <span class=\"token number\">1000</span><span class=\"token punctuation\">,</span> <span class=\"token property\">\"y\"</span><span class=\"token operator\">:</span> <span class=\"token number\">-100</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">{</span><span class=\"token property\">\"id\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"1\"</span><span class=\"token punctuation\">,</span> <span class=\"token property\">\"label\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"n1\"</span><span class=\"token punctuation\">,</span> <span class=\"token property\">\"class\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"c0\"</span><span class=\"token punctuation\">,</span><span class=\"token property\">\"x\"</span><span class=\"token operator\">:</span> <span class=\"token number\">300</span><span class=\"token punctuation\">,</span> <span class=\"token property\">\"y\"</span><span class=\"token operator\">:</span> <span class=\"token number\">-10</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    ...\n  <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"edges\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n    ...\n  <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span></code></pre></div>","position":{"start":{"line":106,"column":1,"offset":3257},"end":{"line":117,"column":4,"offset":3459},"indent":[1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"由于 G6 在读取数据时，发现了数据中带有位置信息（","position":{"start":{"line":119,"column":1,"offset":3461},"end":{"line":119,"column":27,"offset":3487},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">x</code>","position":{"start":{"line":119,"column":27,"offset":3487},"end":{"line":119,"column":30,"offset":3490},"indent":[]}},{"type":"text","value":" 和 ","position":{"start":{"line":119,"column":30,"offset":3490},"end":{"line":119,"column":33,"offset":3493},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">y</code>","position":{"start":{"line":119,"column":33,"offset":3493},"end":{"line":119,"column":36,"offset":3496},"indent":[]}},{"type":"text","value":"），就会按照该位置信息进行绘制，这是为了满足按照原始数据绘制的需求设计的。但为优化超出屏幕到问题，G6 提供了图的两个相关配置项：","position":{"start":{"line":119,"column":36,"offset":3496},"end":{"line":119,"column":101,"offset":3561},"indent":[]}}],"position":{"start":{"line":119,"column":1,"offset":3461},"end":{"line":119,"column":101,"offset":3561},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" ","position":{"start":{"line":121,"column":3,"offset":3565},"end":{"line":121,"column":4,"offset":3566},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">fitView</code>","position":{"start":{"line":121,"column":4,"offset":3566},"end":{"line":121,"column":13,"offset":3575},"indent":[]}},{"type":"text","value":"：设置是否将图适配到画布中；","position":{"start":{"line":121,"column":13,"offset":3575},"end":{"line":121,"column":27,"offset":3589},"indent":[]}}],"position":{"start":{"line":121,"column":3,"offset":3565},"end":{"line":121,"column":27,"offset":3589},"indent":[]}}],"position":{"start":{"line":121,"column":1,"offset":3563},"end":{"line":121,"column":27,"offset":3589},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" ","position":{"start":{"line":122,"column":3,"offset":3592},"end":{"line":122,"column":4,"offset":3593},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">fitViewPadding</code>","position":{"start":{"line":122,"column":4,"offset":3593},"end":{"line":122,"column":20,"offset":3609},"indent":[]}},{"type":"text","value":"：画布上四周的留白宽度。","position":{"start":{"line":122,"column":20,"offset":3609},"end":{"line":122,"column":32,"offset":3621},"indent":[]}}],"position":{"start":{"line":122,"column":3,"offset":3592},"end":{"line":122,"column":32,"offset":3621},"indent":[]}}],"position":{"start":{"line":122,"column":1,"offset":3590},"end":{"line":122,"column":32,"offset":3621},"indent":[]}}],"position":{"start":{"line":121,"column":1,"offset":3563},"end":{"line":122,"column":32,"offset":3621},"indent":[1]}},{"type":"paragraph","children":[{"type":"text","value":"我们将实例化图的代码更改为如下形式：","position":{"start":{"line":124,"column":1,"offset":3623},"end":{"line":124,"column":19,"offset":3641},"indent":[]}}],"position":{"start":{"line":124,"column":1,"offset":3623},"end":{"line":124,"column":19,"offset":3641},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> 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  fitView<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  fitViewPadding<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">20</span><span class=\"token punctuation\">,</span> <span class=\"token number\">40</span><span class=\"token punctuation\">,</span> <span class=\"token number\">50</span><span class=\"token punctuation\">,</span> <span class=\"token number\">20</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":125,"column":1,"offset":3642},"end":{"line":131,"column":4,"offset":3755},"indent":[1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"上述代码将会生成如下图：","position":{"start":{"line":133,"column":1,"offset":3757},"end":{"line":133,"column":13,"offset":3769},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":133,"column":13,"offset":3769},"end":{"line":133,"column":19,"offset":3775},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/156681/1569834252133-4c0bfeb6-e636-47a9-89d5-60a50b2f9211.png##align=left&display=inline&height=323&name=image.png&originHeight=1170&originWidth=2024&search=&size=345324&status=done&width=559","alt":"image.png","position":{"start":{"line":133,"column":19,"offset":3775},"end":{"line":133,"column":263,"offset":4019},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":133,"column":263,"offset":4019},"end":{"line":133,"column":269,"offset":4025},"indent":[]}},{"type":"text","value":"可以看到，图像已经可以自动适配画布的大小，完整的显示了出来。","position":{"start":{"line":133,"column":269,"offset":4025},"end":{"line":133,"column":299,"offset":4055},"indent":[]}}],"position":{"start":{"line":133,"column":1,"offset":3757},"end":{"line":133,"column":299,"offset":4055},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#常用配置","title":null,"children":[],"data":{"hProperties":{"aria-label":"常用配置 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]}},{"type":"text","value":"*常用配置","position":{"start":{"line":135,"column":4,"offset":4060},"end":{"line":135,"column":9,"offset":4065},"indent":[]}}],"position":{"start":{"line":135,"column":1,"offset":4057},"end":{"line":135,"column":9,"offset":4065},"indent":[]},"data":{"id":"常用配置","htmlAttributes":{"id":"常用配置"},"hProperties":{"id":"常用配置"}}},{"type":"paragraph","children":[{"type":"text","value":"本文使用到的配置以及后续 Tutorial 将会使用到到常用配置如下：","position":{"start":{"line":136,"column":1,"offset":4066},"end":{"line":136,"column":36,"offset":4101},"indent":[]}}],"position":{"start":{"line":136,"column":1,"offset":4066},"end":{"line":136,"column":36,"offset":4101},"indent":[]}},{"type":"table","align":[null,null,null,null,null],"children":[{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"配置项","position":{"start":{"line":138,"column":3,"offset":4105},"end":{"line":138,"column":6,"offset":4108},"indent":[]}}],"position":{"start":{"line":138,"column":3,"offset":4105},"end":{"line":138,"column":6,"offset":4108},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"类型","position":{"start":{"line":138,"column":9,"offset":4111},"end":{"line":138,"column":11,"offset":4113},"indent":[]}}],"position":{"start":{"line":138,"column":9,"offset":4111},"end":{"line":138,"column":11,"offset":4113},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"选项 / 示例","position":{"start":{"line":138,"column":14,"offset":4116},"end":{"line":138,"column":21,"offset":4123},"indent":[]}}],"position":{"start":{"line":138,"column":14,"offset":4116},"end":{"line":138,"column":21,"offset":4123},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"默认","position":{"start":{"line":138,"column":24,"offset":4126},"end":{"line":138,"column":26,"offset":4128},"indent":[]}}],"position":{"start":{"line":138,"column":24,"offset":4126},"end":{"line":138,"column":26,"offset":4128},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"说明","position":{"start":{"line":138,"column":29,"offset":4131},"end":{"line":138,"column":31,"offset":4133},"indent":[]}}],"position":{"start":{"line":138,"column":29,"offset":4131},"end":{"line":138,"column":31,"offset":4133},"indent":[]}}],"position":{"start":{"line":138,"column":1,"offset":4103},"end":{"line":138,"column":33,"offset":4135},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"renderer","position":{"start":{"line":140,"column":3,"offset":4170},"end":{"line":140,"column":11,"offset":4178},"indent":[]}}],"position":{"start":{"line":140,"column":3,"offset":4170},"end":{"line":140,"column":11,"offset":4178},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"String","position":{"start":{"line":140,"column":14,"offset":4181},"end":{"line":140,"column":20,"offset":4187},"indent":[]}}],"position":{"start":{"line":140,"column":14,"offset":4181},"end":{"line":140,"column":20,"offset":4187},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"'canvas' ","position":{"start":{"line":140,"column":23,"offset":4190},"end":{"line":140,"column":32,"offset":4199},"indent":[]}},{"type":"text","value":"|","position":{"start":{"line":140,"column":32,"offset":4199},"end":{"line":140,"column":34,"offset":4201},"indent":[]}},{"type":"text","value":" 'svg'","position":{"start":{"line":140,"column":34,"offset":4201},"end":{"line":140,"column":40,"offset":4207},"indent":[]}}],"position":{"start":{"line":140,"column":23,"offset":4190},"end":{"line":140,"column":40,"offset":4207},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"'canvas'","position":{"start":{"line":140,"column":43,"offset":4210},"end":{"line":140,"column":51,"offset":4218},"indent":[]}}],"position":{"start":{"line":140,"column":43,"offset":4210},"end":{"line":140,"column":51,"offset":4218},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"绘制图的方式是 canvas 还是 SVG。","position":{"start":{"line":140,"column":54,"offset":4221},"end":{"line":140,"column":76,"offset":4243},"indent":[]}}],"position":{"start":{"line":140,"column":54,"offset":4221},"end":{"line":140,"column":76,"offset":4243},"indent":[]}}],"position":{"start":{"line":140,"column":1,"offset":4168},"end":{"line":140,"column":78,"offset":4245},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"fitView","position":{"start":{"line":141,"column":3,"offset":4248},"end":{"line":141,"column":10,"offset":4255},"indent":[]}}],"position":{"start":{"line":141,"column":3,"offset":4248},"end":{"line":141,"column":10,"offset":4255},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"Boolean","position":{"start":{"line":141,"column":13,"offset":4258},"end":{"line":141,"column":20,"offset":4265},"indent":[]}}],"position":{"start":{"line":141,"column":13,"offset":4258},"end":{"line":141,"column":20,"offset":4265},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"true ","position":{"start":{"line":141,"column":23,"offset":4268},"end":{"line":141,"column":28,"offset":4273},"indent":[]}},{"type":"text","value":"|","position":{"start":{"line":141,"column":28,"offset":4273},"end":{"line":141,"column":30,"offset":4275},"indent":[]}},{"type":"text","value":" false","position":{"start":{"line":141,"column":30,"offset":4275},"end":{"line":141,"column":36,"offset":4281},"indent":[]}}],"position":{"start":{"line":141,"column":23,"offset":4268},"end":{"line":141,"column":36,"offset":4281},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"false","position":{"start":{"line":141,"column":39,"offset":4284},"end":{"line":141,"column":44,"offset":4289},"indent":[]}}],"position":{"start":{"line":141,"column":39,"offset":4284},"end":{"line":141,"column":44,"offset":4289},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"是否将图适配到画布大小，可以防止超出画布或留白太多。","position":{"start":{"line":141,"column":47,"offset":4292},"end":{"line":141,"column":73,"offset":4318},"indent":[]}}],"position":{"start":{"line":141,"column":47,"offset":4292},"end":{"line":141,"column":73,"offset":4318},"indent":[]}}],"position":{"start":{"line":141,"column":1,"offset":4246},"end":{"line":141,"column":75,"offset":4320},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"fitViewPadding","position":{"start":{"line":142,"column":3,"offset":4323},"end":{"line":142,"column":17,"offset":4337},"indent":[]}}],"position":{"start":{"line":142,"column":3,"offset":4323},"end":{"line":142,"column":17,"offset":4337},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"Number ","position":{"start":{"line":142,"column":20,"offset":4340},"end":{"line":142,"column":27,"offset":4347},"indent":[]}},{"type":"text","value":"|","position":{"start":{"line":142,"column":27,"offset":4347},"end":{"line":142,"column":29,"offset":4349},"indent":[]}},{"type":"text","value":" Array","position":{"start":{"line":142,"column":29,"offset":4349},"end":{"line":142,"column":35,"offset":4355},"indent":[]}}],"position":{"start":{"line":142,"column":20,"offset":4340},"end":{"line":142,"column":35,"offset":4355},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"20 ","position":{"start":{"line":142,"column":38,"offset":4358},"end":{"line":142,"column":41,"offset":4361},"indent":[]}},{"type":"text","value":"|","position":{"start":{"line":142,"column":41,"offset":4361},"end":{"line":142,"column":43,"offset":4363},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":142,"column":43,"offset":4363},"end":{"line":142,"column":44,"offset":4364},"indent":[]}},{"type":"linkReference","identifier":" 20, 40, 50, 20 ","label":" 20, 40, 50, 20 ","referenceType":"shortcut","children":[{"type":"text","value":" 20, 40, 50, 20 ","position":{"start":{"line":142,"column":45,"offset":4365},"end":{"line":142,"column":61,"offset":4381},"indent":[]}}],"position":{"start":{"line":142,"column":44,"offset":4364},"end":{"line":142,"column":62,"offset":4382},"indent":[]}}],"position":{"start":{"line":142,"column":38,"offset":4358},"end":{"line":142,"column":62,"offset":4382},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"0","position":{"start":{"line":142,"column":65,"offset":4385},"end":{"line":142,"column":66,"offset":4386},"indent":[]}}],"position":{"start":{"line":142,"column":65,"offset":4385},"end":{"line":142,"column":66,"offset":4386},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"画布上的四周留白宽度。","position":{"start":{"line":142,"column":69,"offset":4389},"end":{"line":142,"column":80,"offset":4400},"indent":[]}}],"position":{"start":{"line":142,"column":69,"offset":4389},"end":{"line":142,"column":80,"offset":4400},"indent":[]}}],"position":{"start":{"line":142,"column":1,"offset":4321},"end":{"line":142,"column":82,"offset":4402},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"animate","position":{"start":{"line":143,"column":3,"offset":4405},"end":{"line":143,"column":10,"offset":4412},"indent":[]}}],"position":{"start":{"line":143,"column":3,"offset":4405},"end":{"line":143,"column":10,"offset":4412},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"Boolean","position":{"start":{"line":143,"column":13,"offset":4415},"end":{"line":143,"column":20,"offset":4422},"indent":[]}}],"position":{"start":{"line":143,"column":13,"offset":4415},"end":{"line":143,"column":20,"offset":4422},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"true ","position":{"start":{"line":143,"column":23,"offset":4425},"end":{"line":143,"column":28,"offset":4430},"indent":[]}},{"type":"text","value":"|","position":{"start":{"line":143,"column":28,"offset":4430},"end":{"line":143,"column":30,"offset":4432},"indent":[]}},{"type":"text","value":" false","position":{"start":{"line":143,"column":30,"offset":4432},"end":{"line":143,"column":36,"offset":4438},"indent":[]}}],"position":{"start":{"line":143,"column":23,"offset":4425},"end":{"line":143,"column":36,"offset":4438},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"false","position":{"start":{"line":143,"column":39,"offset":4441},"end":{"line":143,"column":44,"offset":4446},"indent":[]}}],"position":{"start":{"line":143,"column":39,"offset":4441},"end":{"line":143,"column":44,"offset":4446},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"是否启用图的动画。","position":{"start":{"line":143,"column":47,"offset":4449},"end":{"line":143,"column":56,"offset":4458},"indent":[]}}],"position":{"start":{"line":143,"column":47,"offset":4449},"end":{"line":143,"column":56,"offset":4458},"indent":[]}}],"position":{"start":{"line":143,"column":1,"offset":4403},"end":{"line":143,"column":58,"offset":4460},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"modes","position":{"start":{"line":144,"column":3,"offset":4463},"end":{"line":144,"column":8,"offset":4468},"indent":[]}}],"position":{"start":{"line":144,"column":3,"offset":4463},"end":{"line":144,"column":8,"offset":4468},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"Object","position":{"start":{"line":144,"column":11,"offset":4471},"end":{"line":144,"column":17,"offset":4477},"indent":[]}}],"position":{"start":{"line":144,"column":11,"offset":4471},"end":{"line":144,"column":17,"offset":4477},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"{","position":{"start":{"line":144,"column":20,"offset":4480},"end":{"line":144,"column":21,"offset":4481},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":144,"column":21,"offset":4481},"end":{"line":144,"column":27,"offset":4487},"indent":[]}},{"type":"text","value":"  default: ","position":{"start":{"line":144,"column":27,"offset":4487},"end":{"line":144,"column":38,"offset":4498},"indent":[]}},{"type":"linkReference","identifier":" 'drag-node', 'drag-canvas' ","label":" 'drag-node', 'drag-canvas' ","referenceType":"shortcut","children":[{"type":"text","value":" 'drag-node', 'drag-canvas' ","position":{"start":{"line":144,"column":39,"offset":4499},"end":{"line":144,"column":67,"offset":4527},"indent":[]}}],"position":{"start":{"line":144,"column":38,"offset":4498},"end":{"line":144,"column":68,"offset":4528},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":144,"column":68,"offset":4528},"end":{"line":144,"column":74,"offset":4534},"indent":[]}},{"type":"text","value":"}","position":{"start":{"line":144,"column":74,"offset":4534},"end":{"line":144,"column":75,"offset":4535},"indent":[]}}],"position":{"start":{"line":144,"column":20,"offset":4480},"end":{"line":144,"column":75,"offset":4535},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"null","position":{"start":{"line":144,"column":78,"offset":4538},"end":{"line":144,"column":82,"offset":4542},"indent":[]}}],"position":{"start":{"line":144,"column":78,"offset":4538},"end":{"line":144,"column":82,"offset":4542},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"图上行为模式的集合。由于比较复杂，按需参见：","position":{"start":{"line":144,"column":85,"offset":4545},"end":{"line":144,"column":107,"offset":4567},"indent":[]}},{"type":"link","title":null,"url":"../middle/mode","children":[{"type":"text","value":"G6 中的 mode","position":{"start":{"line":144,"column":108,"offset":4568},"end":{"line":144,"column":118,"offset":4578},"indent":[]}}],"position":{"start":{"line":144,"column":107,"offset":4567},"end":{"line":144,"column":135,"offset":4595},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":144,"column":135,"offset":4595},"end":{"line":144,"column":136,"offset":4596},"indent":[]}}],"position":{"start":{"line":144,"column":85,"offset":4545},"end":{"line":144,"column":136,"offset":4596},"indent":[]}}],"position":{"start":{"line":144,"column":1,"offset":4461},"end":{"line":144,"column":138,"offset":4598},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"defaultNode","position":{"start":{"line":145,"column":3,"offset":4601},"end":{"line":145,"column":14,"offset":4612},"indent":[]}}],"position":{"start":{"line":145,"column":3,"offset":4601},"end":{"line":145,"column":14,"offset":4612},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"Object","position":{"start":{"line":145,"column":17,"offset":4615},"end":{"line":145,"column":23,"offset":4621},"indent":[]}}],"position":{"start":{"line":145,"column":17,"offset":4615},"end":{"line":145,"column":23,"offset":4621},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"{","position":{"start":{"line":145,"column":26,"offset":4624},"end":{"line":145,"column":27,"offset":4625},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":145,"column":27,"offset":4625},"end":{"line":145,"column":33,"offset":4631},"indent":[]}},{"type":"text","value":"  shape: 'circle',","position":{"start":{"line":145,"column":33,"offset":4631},"end":{"line":145,"column":51,"offset":4649},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":145,"column":51,"offset":4649},"end":{"line":145,"column":57,"offset":4655},"indent":[]}},{"type":"text","value":"  color: '#000',","position":{"start":{"line":145,"column":57,"offset":4655},"end":{"line":145,"column":73,"offset":4671},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":145,"column":73,"offset":4671},"end":{"line":145,"column":79,"offset":4677},"indent":[]}},{"type":"text","value":"  style: {","position":{"start":{"line":145,"column":79,"offset":4677},"end":{"line":145,"column":89,"offset":4687},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":145,"column":89,"offset":4687},"end":{"line":145,"column":95,"offset":4693},"indent":[]}},{"type":"text","value":"    ......","position":{"start":{"line":145,"column":95,"offset":4693},"end":{"line":145,"column":105,"offset":4703},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":145,"column":105,"offset":4703},"end":{"line":145,"column":111,"offset":4709},"indent":[]}},{"type":"text","value":"  }","position":{"start":{"line":145,"column":111,"offset":4709},"end":{"line":145,"column":114,"offset":4712},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":145,"column":114,"offset":4712},"end":{"line":145,"column":120,"offset":4718},"indent":[]}},{"type":"text","value":"}","position":{"start":{"line":145,"column":120,"offset":4718},"end":{"line":145,"column":121,"offset":4719},"indent":[]}}],"position":{"start":{"line":145,"column":26,"offset":4624},"end":{"line":145,"column":121,"offset":4719},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"null","position":{"start":{"line":145,"column":124,"offset":4722},"end":{"line":145,"column":128,"offset":4726},"indent":[]}}],"position":{"start":{"line":145,"column":124,"offset":4722},"end":{"line":145,"column":128,"offset":4726},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"节点默认的属性，包括节点的一般属性和样式属性（style）。","position":{"start":{"line":145,"column":131,"offset":4729},"end":{"line":145,"column":161,"offset":4759},"indent":[]}}],"position":{"start":{"line":145,"column":131,"offset":4729},"end":{"line":145,"column":161,"offset":4759},"indent":[]}}],"position":{"start":{"line":145,"column":1,"offset":4599},"end":{"line":145,"column":163,"offset":4761},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"defaultEdge","position":{"start":{"line":146,"column":3,"offset":4764},"end":{"line":146,"column":14,"offset":4775},"indent":[]}}],"position":{"start":{"line":146,"column":3,"offset":4764},"end":{"line":146,"column":14,"offset":4775},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"Object","position":{"start":{"line":146,"column":17,"offset":4778},"end":{"line":146,"column":23,"offset":4784},"indent":[]}}],"position":{"start":{"line":146,"column":17,"offset":4778},"end":{"line":146,"column":23,"offset":4784},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"{","position":{"start":{"line":146,"column":26,"offset":4787},"end":{"line":146,"column":27,"offset":4788},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":146,"column":27,"offset":4788},"end":{"line":146,"column":33,"offset":4794},"indent":[]}},{"type":"text","value":"  shape: 'polyline',","position":{"start":{"line":146,"column":33,"offset":4794},"end":{"line":146,"column":53,"offset":4814},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":146,"column":53,"offset":4814},"end":{"line":146,"column":59,"offset":4820},"indent":[]}},{"type":"text","value":"  color: '#000',","position":{"start":{"line":146,"column":59,"offset":4820},"end":{"line":146,"column":75,"offset":4836},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":146,"column":75,"offset":4836},"end":{"line":146,"column":81,"offset":4842},"indent":[]}},{"type":"text","value":"  style: {","position":{"start":{"line":146,"column":81,"offset":4842},"end":{"line":146,"column":91,"offset":4852},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":146,"column":91,"offset":4852},"end":{"line":146,"column":97,"offset":4858},"indent":[]}},{"type":"text","value":"    ......","position":{"start":{"line":146,"column":97,"offset":4858},"end":{"line":146,"column":107,"offset":4868},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":146,"column":107,"offset":4868},"end":{"line":146,"column":113,"offset":4874},"indent":[]}},{"type":"text","value":"  }","position":{"start":{"line":146,"column":113,"offset":4874},"end":{"line":146,"column":116,"offset":4877},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":146,"column":116,"offset":4877},"end":{"line":146,"column":122,"offset":4883},"indent":[]}},{"type":"text","value":"}","position":{"start":{"line":146,"column":122,"offset":4883},"end":{"line":146,"column":123,"offset":4884},"indent":[]}}],"position":{"start":{"line":146,"column":26,"offset":4787},"end":{"line":146,"column":123,"offset":4884},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"null","position":{"start":{"line":146,"column":126,"offset":4887},"end":{"line":146,"column":130,"offset":4891},"indent":[]}}],"position":{"start":{"line":146,"column":126,"offset":4887},"end":{"line":146,"column":130,"offset":4891},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"边默认的属性，包括边的一般属性和样式属性（style）。","position":{"start":{"line":146,"column":133,"offset":4894},"end":{"line":146,"column":161,"offset":4922},"indent":[]}}],"position":{"start":{"line":146,"column":133,"offset":4894},"end":{"line":146,"column":161,"offset":4922},"indent":[]}}],"position":{"start":{"line":146,"column":1,"offset":4762},"end":{"line":146,"column":163,"offset":4924},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"nodeStateStyles","position":{"start":{"line":147,"column":3,"offset":4927},"end":{"line":147,"column":18,"offset":4942},"indent":[]}}],"position":{"start":{"line":147,"column":3,"offset":4927},"end":{"line":147,"column":18,"offset":4942},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"Object","position":{"start":{"line":147,"column":21,"offset":4945},"end":{"line":147,"column":27,"offset":4951},"indent":[]}}],"position":{"start":{"line":147,"column":21,"offset":4945},"end":{"line":147,"column":27,"offset":4951},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"{","position":{"start":{"line":147,"column":30,"offset":4954},"end":{"line":147,"column":31,"offset":4955},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":147,"column":31,"offset":4955},"end":{"line":147,"column":37,"offset":4961},"indent":[]}},{"type":"text","value":"  hover: {","position":{"start":{"line":147,"column":37,"offset":4961},"end":{"line":147,"column":47,"offset":4971},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":147,"column":47,"offset":4971},"end":{"line":147,"column":53,"offset":4977},"indent":[]}},{"type":"text","value":"    ......","position":{"start":{"line":147,"column":53,"offset":4977},"end":{"line":147,"column":63,"offset":4987},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":147,"column":63,"offset":4987},"end":{"line":147,"column":69,"offset":4993},"indent":[]}},{"type":"text","value":"  },","position":{"start":{"line":147,"column":69,"offset":4993},"end":{"line":147,"column":73,"offset":4997},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":147,"column":73,"offset":4997},"end":{"line":147,"column":79,"offset":5003},"indent":[]}},{"type":"text","value":"  select: {","position":{"start":{"line":147,"column":79,"offset":5003},"end":{"line":147,"column":90,"offset":5014},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":147,"column":90,"offset":5014},"end":{"line":147,"column":96,"offset":5020},"indent":[]}},{"type":"text","value":"    ......","position":{"start":{"line":147,"column":96,"offset":5020},"end":{"line":147,"column":106,"offset":5030},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":147,"column":106,"offset":5030},"end":{"line":147,"column":112,"offset":5036},"indent":[]}},{"type":"text","value":"  }","position":{"start":{"line":147,"column":112,"offset":5036},"end":{"line":147,"column":115,"offset":5039},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":147,"column":115,"offset":5039},"end":{"line":147,"column":121,"offset":5045},"indent":[]}},{"type":"text","value":"}","position":{"start":{"line":147,"column":121,"offset":5045},"end":{"line":147,"column":122,"offset":5046},"indent":[]}}],"position":{"start":{"line":147,"column":30,"offset":4954},"end":{"line":147,"column":122,"offset":5046},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"null","position":{"start":{"line":147,"column":125,"offset":5049},"end":{"line":147,"column":129,"offset":5053},"indent":[]}}],"position":{"start":{"line":147,"column":125,"offset":5049},"end":{"line":147,"column":129,"offset":5053},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"节点在除默认状态外，其他状态下的样式属性（style）。例如鼠标放置（hover）、选中（select）等状态。","position":{"start":{"line":147,"column":132,"offset":5056},"end":{"line":147,"column":188,"offset":5112},"indent":[]}}],"position":{"start":{"line":147,"column":132,"offset":5056},"end":{"line":147,"column":188,"offset":5112},"indent":[]}}],"position":{"start":{"line":147,"column":1,"offset":4925},"end":{"line":147,"column":190,"offset":5114},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"edgeStateStyles","position":{"start":{"line":148,"column":3,"offset":5117},"end":{"line":148,"column":18,"offset":5132},"indent":[]}}],"position":{"start":{"line":148,"column":3,"offset":5117},"end":{"line":148,"column":18,"offset":5132},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"Object","position":{"start":{"line":148,"column":21,"offset":5135},"end":{"line":148,"column":27,"offset":5141},"indent":[]}}],"position":{"start":{"line":148,"column":21,"offset":5135},"end":{"line":148,"column":27,"offset":5141},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"{","position":{"start":{"line":148,"column":30,"offset":5144},"end":{"line":148,"column":31,"offset":5145},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":148,"column":31,"offset":5145},"end":{"line":148,"column":37,"offset":5151},"indent":[]}},{"type":"text","value":"  hover: {","position":{"start":{"line":148,"column":37,"offset":5151},"end":{"line":148,"column":47,"offset":5161},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":148,"column":47,"offset":5161},"end":{"line":148,"column":53,"offset":5167},"indent":[]}},{"type":"text","value":"    ......","position":{"start":{"line":148,"column":53,"offset":5167},"end":{"line":148,"column":63,"offset":5177},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":148,"column":63,"offset":5177},"end":{"line":148,"column":69,"offset":5183},"indent":[]}},{"type":"text","value":"  },","position":{"start":{"line":148,"column":69,"offset":5183},"end":{"line":148,"column":73,"offset":5187},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":148,"column":73,"offset":5187},"end":{"line":148,"column":79,"offset":5193},"indent":[]}},{"type":"text","value":"  select: {","position":{"start":{"line":148,"column":79,"offset":5193},"end":{"line":148,"column":90,"offset":5204},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":148,"column":90,"offset":5204},"end":{"line":148,"column":96,"offset":5210},"indent":[]}},{"type":"text","value":"    ......","position":{"start":{"line":148,"column":96,"offset":5210},"end":{"line":148,"column":106,"offset":5220},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":148,"column":106,"offset":5220},"end":{"line":148,"column":112,"offset":5226},"indent":[]}},{"type":"text","value":"  }","position":{"start":{"line":148,"column":112,"offset":5226},"end":{"line":148,"column":115,"offset":5229},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":148,"column":115,"offset":5229},"end":{"line":148,"column":121,"offset":5235},"indent":[]}},{"type":"text","value":"}","position":{"start":{"line":148,"column":121,"offset":5235},"end":{"line":148,"column":122,"offset":5236},"indent":[]}}],"position":{"start":{"line":148,"column":30,"offset":5144},"end":{"line":148,"column":122,"offset":5236},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"null","position":{"start":{"line":148,"column":125,"offset":5239},"end":{"line":148,"column":129,"offset":5243},"indent":[]}}],"position":{"start":{"line":148,"column":125,"offset":5239},"end":{"line":148,"column":129,"offset":5243},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"边在除默认状态外，其他状态下的样式属性（style）。例如鼠标放置（hover）、选中（select）等状态。","position":{"start":{"line":148,"column":132,"offset":5246},"end":{"line":148,"column":187,"offset":5301},"indent":[]}}],"position":{"start":{"line":148,"column":132,"offset":5246},"end":{"line":148,"column":187,"offset":5301},"indent":[]}}],"position":{"start":{"line":148,"column":1,"offset":5115},"end":{"line":148,"column":189,"offset":5303},"indent":[]}}],"position":{"start":{"line":138,"column":1,"offset":4103},"end":{"line":148,"column":189,"offset":5303},"indent":[1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#完整代码","title":null,"children":[],"data":{"hProperties":{"aria-label":"完整代码 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]}},{"type":"text","value":"完整代码","position":{"start":{"line":151,"column":4,"offset":5309},"end":{"line":151,"column":8,"offset":5313},"indent":[]}}],"position":{"start":{"line":151,"column":1,"offset":5306},"end":{"line":151,"column":8,"offset":5313},"indent":[]},"data":{"id":"完整代码","htmlAttributes":{"id":"完整代码"},"hProperties":{"id":"完整代码"}}},{"type":"paragraph","children":[{"type":"text","value":"至此，完整代码如下：","position":{"start":{"line":152,"column":1,"offset":5314},"end":{"line":152,"column":11,"offset":5324},"indent":[]}}],"position":{"start":{"line":152,"column":1,"offset":5314},"end":{"line":152,"column":11,"offset":5324},"indent":[]}},{"type":"html","lang":"html","meta":null,"value":"<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token doctype\">&lt;!DOCTYPE html></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>head</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>title</span><span class=\"token punctuation\">></span></span>Tutorial Demo<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>title</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>head</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>body</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>mountNode<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\">\n    <span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">G6<span class=\"token punctuation\">.</span>Graph</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n      container<span class=\"token punctuation\">:</span> <span class=\"token string\">'mountNode'</span><span class=\"token punctuation\">,</span>\n      width<span class=\"token punctuation\">:</span> <span class=\"token number\">1000</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      renderer<span class=\"token punctuation\">:</span> <span class=\"token string\">'svg'</span><span class=\"token punctuation\">,</span>\n      fitView<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n      fitViewPadding<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span> <span class=\"token number\">20</span><span class=\"token punctuation\">,</span> <span class=\"token number\">40</span><span class=\"token punctuation\">,</span> <span class=\"token number\">50</span><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><span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">const</span> <span class=\"token function-variable function\">main</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">async</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">const</span> response <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span><span class=\"token string\">'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n      <span class=\"token keyword\">const</span> remoteData <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> response<span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n      graph<span class=\"token punctuation\">.</span><span class=\"token function\">data</span><span class=\"token punctuation\">(</span>remoteData<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n      graph<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n    <span class=\"token function\">main</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>body</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>html</span><span class=\"token punctuation\">></span></span></code></pre></div>","position":{"start":{"line":153,"column":1,"offset":5325},"end":{"line":183,"column":4,"offset":6081},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":" ","position":{"start":{"line":185,"column":1,"offset":6083},"end":{"line":185,"column":2,"offset":6084},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">注意</code>","position":{"start":{"line":185,"column":2,"offset":6084},"end":{"line":185,"column":6,"offset":6088},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":185,"column":6,"offset":6088},"end":{"line":185,"column":7,"offset":6089},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":185,"column":7,"offset":6089},"end":{"line":185,"column":13,"offset":6095},"indent":[]}},{"type":"text","value":"若需更换数据，请替换 ","position":{"start":{"line":185,"column":13,"offset":6095},"end":{"line":185,"column":24,"offset":6106},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">&#39;https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json&#39;</code>","position":{"start":{"line":185,"column":24,"offset":6106},"end":{"line":185,"column":115,"offset":6197},"indent":[]}},{"type":"text","value":" 为新的数据文件地址。","position":{"start":{"line":185,"column":115,"offset":6197},"end":{"line":185,"column":126,"offset":6208},"indent":[]}}],"position":{"start":{"line":185,"column":1,"offset":6083},"end":{"line":185,"column":126,"offset":6208},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":186,"column":1,"offset":6209}}}}