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

graph visualization frame work

{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-a24948befeef82fe6e1a9447a1629348-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<p>本文将进行 <strong>Tutorial案例</strong>的简单绘制和配置。通过本文，你将知道创建一般图时一些常用的配置项及其作用。</p>\n<h2 id=\"基础绘制\"><a href=\"#%E5%9F%BA%E7%A1%80%E7%BB%98%E5%88%B6\" aria-label=\"基础绘制 permalink\" class=\"anchor\"><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></a>基础绘制</h2>\n<h3 id=\"创建容器\"><a href=\"#%E5%88%9B%E5%BB%BA%E5%AE%B9%E5%99%A8\" aria-label=\"创建容器 permalink\" class=\"anchor\"><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></a>创建容器</h3>\n<p>需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为 <code class=\"language-text\">div</code> 标签。G6 在绘制时会在该容器下追加 <code class=\"language-text\">canvas</code> 标签，然后将图绘制在其中。</p>\n<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>\n<h3 id=\"数据准备\"><a href=\"#%E6%95%B0%E6%8D%AE%E5%87%86%E5%A4%87\" aria-label=\"数据准备 permalink\" class=\"anchor\"><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></a>数据准备</h3>\n<p>引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点（<code class=\"language-text\">nodes</code>）和边（<code class=\"language-text\">edges</code>）字段，分别用数组表示：</p>\n<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>\n<p> <code class=\"language-text\">注意</code></p>\n<ul>\n<li><code class=\"language-text\">nodes</code> 数组中包含节点对象，唯一的 <code class=\"language-text\">id</code> 是每个节点对象中必要的属性，<code class=\"language-text\">x</code>、 <code class=\"language-text\">y</code> 用于定位；</li>\n<li><code class=\"language-text\">edges</code> 数组中包含边对象，<code class=\"language-text\">source</code> 和 <code class=\"language-text\">target</code> 是每条边的必要属性，分别代表了该边的起始点 <code class=\"language-text\">id</code> 与 目标点 <code class=\"language-text\">id</code>。</li>\n<li>点和边的更多属性参见：<a href=\"../middle/elements/defaultNode\">内置的节点</a>，<a href=\"../middle/elements/defaultEdge\">内置的边</a>。</li>\n</ul>\n<h3 id=\"图实例化\"><a href=\"#%E5%9B%BE%E5%AE%9E%E4%BE%8B%E5%8C%96\" aria-label=\"图实例化 permalink\" class=\"anchor\"><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></a>图实例化</h3>\n<p>图实例化时，至少需要为图设置容器、宽、高：</p>\n<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>\n<h3 id=\"图的渲染\"><a href=\"#%E5%9B%BE%E7%9A%84%E6%B8%B2%E6%9F%93\" aria-label=\"图的渲染 permalink\" class=\"anchor\"><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></a>图的渲染</h3>\n<p>数据的加载和图的渲染是两个步骤，可以分开进行。</p>\n<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>\n<h3 id=\"绘制结果\"><a href=\"#%E7%BB%98%E5%88%B6%E7%BB%93%E6%9E%9C\" aria-label=\"绘制结果 permalink\" class=\"anchor\"><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></a>绘制结果</h3>\n<p>调用 <code class=\"language-text\">graph.render()</code> 方法之后，G6 引擎会根据加载的数据进行图的绘制。如果没有额外指定图实例的 renderer 属性配置，则默认采用 Canvas 进行绘制，结果如下：<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571051400528-c0c31bcb-1de9-4e6f-bd17-03737f939ef9.png#align=left&#x26;display=inline&#x26;height=178&#x26;name=image.png&#x26;originHeight=178&#x26;originWidth=340&#x26;search=&#x26;size=5910&#x26;status=done&#x26;width=340\" alt=\"image.png\"></p>\n<h2 id=\"真实数据加载\"><a href=\"#%E7%9C%9F%E5%AE%9E%E6%95%B0%E6%8D%AE%E5%8A%A0%E8%BD%BD\" aria-label=\"真实数据加载 permalink\" class=\"anchor\"><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></a>真实数据加载</h2>\n<p>上文中，我们使用了仅含有两个节点和一条边的数据，直接将数据定义放在了代码中。而真实场景的数据通常是远程接口请求加载的。为了方便，我们已经给读者准备好了一份 json 数据文件，地址如下：<br /><code class=\"language-text\">https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json</code></p>\n<h3 id=\"加载远程数据\"><a href=\"#%E5%8A%A0%E8%BD%BD%E8%BF%9C%E7%A8%8B%E6%95%B0%E6%8D%AE\" aria-label=\"加载远程数据 permalink\" class=\"anchor\"><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></a>加载远程数据</h3>\n<p>修改 index.html，通过 <code class=\"language-text\">fetch</code> 函数异步加载远程的数据源，并传入 G6 的图实例中：</p>\n<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>\n<blockquote>\n<p>fetch 函数允许我们发起网络请求，加载数据，而其异步的过程可以通过 async/await 进行更合理的控制。这里我们为了方便起见，将主要逻辑放在了 main 函数里面。如果读者对 fetch 和 async/await 的知识有疑问，可以参考：<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function\" target=\"_self\" rel=\"nofollow\">async function</a>，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\" target=\"_self\" rel=\"nofollow\">Fetch API</a></p>\n</blockquote>\n<p>运行后，我们得到了下图结果：<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571051484453-6b192934-7ea3-4229-bd4d-95d6015027a6.png#align=left&#x26;display=inline&#x26;height=308&#x26;name=image.png&#x26;originHeight=1258&#x26;originWidth=1652&#x26;search=&#x26;size=387500&#x26;status=done&#x26;width=404\" alt=\"image.png\"><br />乍看之下，图像有点奇怪，实际上数据已经正确的加载了进来。由于数据量比较大，节点和边都非常的多，显得内容比较杂乱。另外由于画布大小的限制，实际的图被画布截断了，目前只能看见部分内容，这个问题后文会继续解决。</p>\n<p>请看下面摘取自 tutorial-data.json 的部分数据，我们发现数据中节点定义了位置信息 <code class=\"language-text\">x</code> 与 <code class=\"language-text\">y</code>，并且很多节点的 <code class=\"language-text\">x</code> 和 <code class=\"language-text\">y</code> 不在图的宽高（<code class=\"language-text\">width: 800, height: 600</code>）范围内：</p>\n<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>\n<p>由于 G6 在读取数据时，发现了数据中带有位置信息（<code class=\"language-text\">x</code> 和 <code class=\"language-text\">y</code>），就会按照该位置信息进行绘制，这是为了满足按照原始数据绘制的需求设计的。但为优化超出屏幕到问题，G6 提供了图的两个相关配置项：</p>\n<ul>\n<li> <code class=\"language-text\">fitView</code>：设置是否将图适配到画布中；</li>\n<li> <code class=\"language-text\">fitViewPadding</code>：画布上四周的留白宽度。</li>\n</ul>\n<p>我们将实例化图的代码更改为如下形式：</p>\n<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>\n<p>上述代码将会生成如下图：<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1569834252133-4c0bfeb6-e636-47a9-89d5-60a50b2f9211.png##align=left&#x26;display=inline&#x26;height=323&#x26;name=image.png&#x26;originHeight=1170&#x26;originWidth=2024&#x26;search=&#x26;size=345324&#x26;status=done&#x26;width=559\" alt=\"image.png\"><br />可以看到，图像已经可以自动适配画布的大小，完整的显示了出来。</p>\n<h2 id=\"常用配置\"><a href=\"#%E5%B8%B8%E7%94%A8%E9%85%8D%E7%BD%AE\" aria-label=\"常用配置 permalink\" class=\"anchor\"><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></a>*常用配置</h2>\n<p>本文使用到的配置以及后续 Tutorial 将会使用到到常用配置如下：</p>\n<table>\n<thead>\n<tr>\n<th>配置项</th>\n<th>类型</th>\n<th>选项 / 示例</th>\n<th>默认</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>renderer</td>\n<td>String</td>\n<td>'canvas' | 'svg'</td>\n<td>'canvas'</td>\n<td>绘制图的方式是 canvas 还是 SVG。</td>\n</tr>\n<tr>\n<td>fitView</td>\n<td>Boolean</td>\n<td>true | false</td>\n<td>false</td>\n<td>是否将图适配到画布大小，可以防止超出画布或留白太多。</td>\n</tr>\n<tr>\n<td>fitViewPadding</td>\n<td>Number | Array</td>\n<td>20 | [ 20, 40, 50, 20 ]</td>\n<td>0</td>\n<td>画布上的四周留白宽度。</td>\n</tr>\n<tr>\n<td>animate</td>\n<td>Boolean</td>\n<td>true | false</td>\n<td>false</td>\n<td>是否启用图的动画。</td>\n</tr>\n<tr>\n<td>modes</td>\n<td>Object</td>\n<td>{<br />  default: [ 'drag-node', 'drag-canvas' ]<br />}</td>\n<td>null</td>\n<td>图上行为模式的集合。由于比较复杂，按需参见：<a href=\"../middle/mode\">G6 中的 mode</a>。</td>\n</tr>\n<tr>\n<td>defaultNode</td>\n<td>Object</td>\n<td>{<br />  shape: 'circle',<br />  color: '#000',<br />  style: {<br />    ......<br />  }<br />}</td>\n<td>null</td>\n<td>节点默认的属性，包括节点的一般属性和样式属性（style）。</td>\n</tr>\n<tr>\n<td>defaultEdge</td>\n<td>Object</td>\n<td>{<br />  shape: 'polyline',<br />  color: '#000',<br />  style: {<br />    ......<br />  }<br />}</td>\n<td>null</td>\n<td>边默认的属性，包括边的一般属性和样式属性（style）。</td>\n</tr>\n<tr>\n<td>nodeStateStyles</td>\n<td>Object</td>\n<td>{<br />  hover: {<br />    ......<br />  },<br />  select: {<br />    ......<br />  }<br />}</td>\n<td>null</td>\n<td>节点在除默认状态外，其他状态下的样式属性（style）。例如鼠标放置（hover）、选中（select）等状态。</td>\n</tr>\n<tr>\n<td>edgeStateStyles</td>\n<td>Object</td>\n<td>{<br />  hover: {<br />    ......<br />  },<br />  select: {<br />    ......<br />  }<br />}</td>\n<td>null</td>\n<td>边在除默认状态外，其他状态下的样式属性（style）。例如鼠标放置（hover）、选中（select）等状态。</td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"完整代码\"><a href=\"#%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81\" aria-label=\"完整代码 permalink\" class=\"anchor\"><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></a>完整代码</h2>\n<p>至此，完整代码如下：</p>\n<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>\n<p> <code class=\"language-text\">注意</code> <br />若需更换数据，请替换 <code class=\"language-text\">&#39;https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json&#39;</code> 为新的数据文件地址。</p>"}