@antv/g6
Version:
graph visualization frame work
1 lines • 24 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-19c909a584cb04f404739b075ec209b0-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<h2 id=\"什么是-graph\"><a href=\"#%E4%BB%80%E4%B9%88%E6%98%AF-graph\" aria-label=\"什么是 graph 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>什么是 Graph</h2>\n<p>中文字“图”在大家的传统认知里指的是图画、图像，而图论与可视化中的“图”—— Graph 则有着更精确的定位：主体（objects）与关系（relationships）的组成。它甚至不局限于视觉，主体与关系的数据也可以称为图。<br />\n—— 摘自 <a href=\"https://zhuanlan.zhihu.com/aiux-antv\" target=\"_self\" rel=\"nofollow\">AntV 专栏</a>文章：Graph Visualization ·<a href=\"https://zhuanlan.zhihu.com/p/83685690\" target=\"_self\" rel=\"nofollow\"> </a>知多少 之 《<a href=\"https://zhuanlan.zhihu.com/p/83685690\" target=\"_self\" rel=\"nofollow\">HelloWorld</a> <a href=\"https://zhuanlan.zhihu.com/p/83685690\" target=\"_self\" rel=\"nofollow\">图可视化</a>》</p>\n<p>在 G6 中，Graph 对象是图的载体，它包含了图上的所有元素（节点、边等），同时挂载了图的相关操作（如交互监听、元素操作、渲染等）。<br />Graph 对象的生命周期为：初始化 —> 加载数据 —> 渲染 —> 更新 —> 销毁。</p>\n<p>在 <a href=\"https://www.yuque.com/antv/g6/intro#56Nwj\" target=\"_self\" rel=\"nofollow\">快速上手</a> 中，我们简单介绍了 初始化、加载数据、渲染图 的使用方法。本文将主要介绍初始化/实例化图。</p>\n<h2 id=\"前提代码\"><a href=\"#%E5%89%8D%E6%8F%90%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>本文的讲解将会基于下面这份内嵌 JavaScript 的 HTML 代码。该代码通过定义数据、实例化图、读取数据、渲染图等操作中完成了下图中简单的图：<br />\n<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1571034737611-563c61e5-d3c0-407b-89fc-ca8c6fb97f66.png#align=left&display=inline&height=29&name=image.png&originHeight=148&originWidth=736&search=&size=20441&status=done&width=146' width='400' height='80' /></p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token doctype\"><!DOCTYPE html></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>Tutorial Demo<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span>\n /* 图的画布容器 */\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>mountNode<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n /* 引入 G6 */\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\">\n <span class=\"token comment\">// 定义数据源</span>\n <span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 点集</span>\n nodes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">200</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span><span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">300</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">200</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 边集</span>\n edges<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token comment\">// 表示一条从 node1 节点连接到 node2 节点的边</span>\n <span class=\"token punctuation\">{</span>\n source<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n target<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">]</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n \n <span class=\"token comment\">// 创建 G6 图实例</span>\n <span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">G6<span class=\"token punctuation\">.</span>Graph</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n container<span class=\"token punctuation\">:</span> <span class=\"token string\">'mountNode'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 指定图画布的容器 id，与第 9 行的容器对应</span>\n <span class=\"token comment\">// 画布宽高</span>\n width<span class=\"token punctuation\">:</span> <span class=\"token number\">800</span><span class=\"token punctuation\">,</span>\n height<span class=\"token punctuation\">:</span> <span class=\"token number\">500</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 读取数据</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">data</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 渲染图</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></code></pre></div>\n<h2 id=\"初始化实例化图\"><a href=\"#%E5%88%9D%E5%A7%8B%E5%8C%96%E5%AE%9E%E4%BE%8B%E5%8C%96%E5%9B%BE\" 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>通过 <code class=\"language-text\">new G6.Graph(config)</code> 进行图的实例化。其中参数 <code class=\"language-text\">config</code> 是 Object 类型的图的配置项，图的大部分功能可以通过该配置项进行全局配置。如 <a href=\"#cRVfC\">前提代码</a> 这样实例化图：</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 container<span class=\"token punctuation\">:</span> <span class=\"token string\">'mountNode'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 指定图画布的容器 id，与第 9 行的容器对应</span>\n <span class=\"token comment\">// 画布宽高</span>\n width<span class=\"token punctuation\">:</span> <span class=\"token number\">800</span><span class=\"token punctuation\">,</span>\n height<span class=\"token punctuation\">:</span> <span class=\"token number\">500</span><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<h3 id=\"必要配置项\"><a href=\"#%E5%BF%85%E8%A6%81%E9%85%8D%E7%BD%AE%E9%A1%B9\" 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>上面代码中实例化 Graph 的部分使用了三个必要的配置项：</p>\n<ul>\n<li><code class=\"language-text\">container</code></li>\n</ul>\n<p> 类型：String | Object。图的 DOM 容器。可以是 String，为 DOM 容器的 <code class=\"language-text\">id</code>。也可以是 Object ，为 DOM 对象。</p>\n<ul>\n<li><code class=\"language-text\">width</code>、<code class=\"language-text\">height</code></li>\n</ul>\n<p> 类型：Number。图的画布的宽度和高度。</p>\n<h3 id=\"常用配置项\"><a href=\"#%E5%B8%B8%E7%94%A8%E9%85%8D%E7%BD%AE%E9%A1%B9\" 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>下面列举实例化图时常见的配置项，完整的配置项参见 <a href=\"https://www.yuque.com/antv/g6/graph\" target=\"_self\" rel=\"nofollow\">Graph API</a>。</p>\n<h4 id=\"整体渲染相关\"><a href=\"#%E6%95%B4%E4%BD%93%E6%B8%B2%E6%9F%93%E7%9B%B8%E5%85%B3\" 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>整体渲染相关</h4>\n<ul>\n<li><code class=\"language-text\">renderer</code></li>\n</ul>\n<p> 类型：String；选项：<code class=\"language-text\">'svg'</code> | <code class=\"language-text\">'canvas'</code>；默认：<code class=\"language-text\">'canvas'</code>。选择 SVG 或 Canvas 方式渲染。</p>\n<ul>\n<li><code class=\"language-text\">fitView</code></li>\n</ul>\n<p> 类型：Boolean；默认：'false'。图是否自适应画布。</p>\n<ul>\n<li><code class=\"language-text\">fitViewPadding</code></li>\n</ul>\n<p> 类型：Number | Array；默认：0。图自适应画布时的四周留白像素值。fitView 为 true 时生效。</p>\n<h4 id=\"全局元素配置\"><a href=\"#%E5%85%A8%E5%B1%80%E5%85%83%E7%B4%A0%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>全局元素配置</h4>\n<ul>\n<li><code class=\"language-text\">defaultNode</code></li>\n</ul>\n<p> 类型：Object。默认情况下全局节点的配置项，包括样式属性和其他属性。详见 <a href=\"https://www.yuque.com/antv/g6/internal-node\" target=\"_self\" rel=\"nofollow\">内置节点</a>。</p>\n<ul>\n<li><code class=\"language-text\">defaultEdge</code></li>\n</ul>\n<p> 类型：Object。默认情况下全局边的配置项，包括样式属性和其他属性。详见 <a href=\"https://www.yuque.com/antv/g6/internal-edge\" target=\"_self\" rel=\"nofollow\">内置边</a>。</p>\n<ul>\n<li><code class=\"language-text\">nodeStateStyles</code></li>\n</ul>\n<p> 类型：Object。除默认状态外的其他状态下节点的样式配置。详见 <a href=\"https://www.yuque.com/antv/g6/fqnn9w\" target=\"_self\" rel=\"nofollow\">状态 State</a>。</p>\n<ul>\n<li><code class=\"language-text\">edgeStateStyles</code></li>\n</ul>\n<p> 类型：Object。除默认状态外的其他状态下边的样式配置。详见 <a href=\"https://www.yuque.com/antv/g6/fqnn9w\" target=\"_self\" rel=\"nofollow\">状态 State</a>。</p>\n<h4 id=\"布局相关\"><a href=\"#%E5%B8%83%E5%B1%80%E7%9B%B8%E5%85%B3\" 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>布局相关</h4>\n<ul>\n<li><code class=\"language-text\">layout</code></li>\n</ul>\n<p> 类型：Object。若数据中不存在节点位置，则默认为随机布局。配置布局类型及其参数。详见 <a href=\"https://www.yuque.com/antv/g6/qopkkg\" target=\"_self\" rel=\"nofollow\">使用布局 Layout 教程</a>，<a href=\"https://www.yuque.com/antv/g6/agbmu2\" target=\"_self\" rel=\"nofollow\">Layout API</a>。</p>\n<h4 id=\"交互行为相关\"><a href=\"#%E4%BA%A4%E4%BA%92%E8%A1%8C%E4%B8%BA%E7%9B%B8%E5%85%B3\" 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>交互行为相关</h4>\n<ul>\n<li><code class=\"language-text\">modes</code></li>\n</ul>\n<p> 类型：Array。配置多种交互模式及其包含的交互事件的。详见 <a href=\"https://www.yuque.com/antv/g6/g6-mode\" target=\"_self\" rel=\"nofollow\">交互模式 Mode 教程</a>。</p>\n<h4 id=\"动画相关\"><a href=\"#%E5%8A%A8%E7%94%BB%E7%9B%B8%E5%85%B3\" 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>动画相关</h4>\n<ul>\n<li><code class=\"language-text\">animate</code></li>\n</ul>\n<p> 类型：Boolean；默认：'false'。是否启用全局动画。启用后，布局变化时将会以动画形式变换节点位置。</p>\n<ul>\n<li><code class=\"language-text\">animateCfg</code></li>\n</ul>\n<p> 类型：Object。全局动画的配置项，包括动画效果、动画时长等。详见 【TODO】。</p>\n<h4 id=\"插件\"><a href=\"#%E6%8F%92%E4%BB%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>插件</h4>\n<ul>\n<li><code class=\"language-text\">plugins</code></li>\n</ul>\n<p> 类型：Array。配置辅助插件。详见 <a href=\"https://www.yuque.com/antv/g6/plugin\" target=\"_self\" rel=\"nofollow\">Plugin API</a>。</p>\n<h2 id=\"常用函数\"><a href=\"#%E5%B8%B8%E7%94%A8%E5%87%BD%E6%95%B0\" 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>在 <a href=\"https://www.yuque.com/antv/g6/ie7zi7#cRVfC\" target=\"_self\" rel=\"nofollow\">前提代码</a> 中使用了两个必要的函数：</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 读取数据</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">data</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token comment\">// 渲染图</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<ul>\n<li><code class=\"language-text\">data(data)</code>：读取数据源 <code class=\"language-text\">data</code> 到图实例 <code class=\"language-text\">graph</code> 中。</li>\n<li>render()：渲染图。</li>\n</ul>\n<p>Graph 的完整函数参见 <a href=\"https://www.yuque.com/antv/g6/graph#wbgjF\" target=\"_self\" rel=\"nofollow\">Graph API</a>。</p>"}