@antv/g6
Version:
graph visualization frame work
1 lines • 32.1 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-d89f0e0edf41bfc4c9cb8bef2596e4e6-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<p>G6 默认提供的节点是一个基础图形加一个文本图形的实现。可选的内置节点包括 circle，rect，ellipse，diamond，triangle，star，image，modelRect，这些内置节点的默认样式分别如下图所示。<br />\n<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1570852701188-ea33cdb0-71c4-4d53-8827-01912934e7de.png#align=left&display=inline&height=103&name=image.png&originHeight=206&originWidth=1528&search=&size=135825&status=done&width=764' width='750' height='100'></p>\n<h2 id=\"内置节点类型说明\"><a href=\"#%E5%86%85%E7%BD%AE%E8%8A%82%E7%82%B9%E7%B1%BB%E5%9E%8B%E8%AF%B4%E6%98%8E\" 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<table>\n<thead>\n<tr>\n<th>名称</th>\n<th>描述</th>\n<th>默认示例</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>circle</td>\n<td>圆形：<br />- <code class=\"language-text\">size</code> 是单个数字，表示直径<br />- 圆心位置对应节点的位置<br />- <code class=\"language-text\">color</code> 字段默认在描边上生效<br />- 标签文本默认在节点中央<br />- 更多字段见 <a href=\"\">circle 节点的配置</a><br /></td>\n<td><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570852503218-902e8221-e7e7-49c5-911f-ec3cabe7e04f.png#align=left&display=inline&height=56&name=image.png&originHeight=112&originWidth=110&search=&size=13270&status=done&width=55\" alt=\"image.png\"></td>\n</tr>\n<tr>\n<td>rect</td>\n<td>矩形：<br />- <code class=\"language-text\">size</code> 是数组，例如：[100, 50]<br />- 矩形的中心位置是节点的位置，而不是左上角<br />- <code class=\"language-text\">color</code> 字段默认在描边上生效<br />- 标签文本默认在节点中央<br />- 更多字段见 <a href=\"https://www.yuque.com/antv/g6/vdqpdt#qWf35\" target=\"_self\" rel=\"nofollow\">rect 节点的配置</a><br /></td>\n<td><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570852565858-345455f4-2ddb-4c40-9c8a-67e337a9e746.png#align=left&display=inline&height=38&name=image.png&originHeight=76&originWidth=178&search=&size=5514&status=done&width=89\" alt=\"image.png\"></td>\n</tr>\n<tr>\n<td>ellipse</td>\n<td>椭圆：<br />- <code class=\"language-text\">size</code> 是数组，表示椭圆的长和宽<br />- 椭圆的圆心是节点的位置<br />- <code class=\"language-text\">color</code> 字段默认在描边上生效<br />- 标签文本默认在节点中央<br />- 更多字段见 <a href=\"https://www.yuque.com/antv/g6/pxt157#qWf35\" target=\"_self\" rel=\"nofollow\">ellipse 节点的配置</a><br /></td>\n<td><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570852588313-3dcaee5b-b2aa-45d6-99be-6f4c56d494f1.png#align=left&display=inline&height=63&name=image.png&originHeight=126&originWidth=216&search=&size=19099&status=done&width=108\" alt=\"image.png\"></td>\n</tr>\n<tr>\n<td>diamond</td>\n<td>菱形：<br />- <code class=\"language-text\">size</code> 是数组，表示菱形的长和宽<br />- 菱形的中心位置是节点的位置<br />- <code class=\"language-text\">color</code> 字段默认在描边上生效<br />- 标签文本默认在节点中央<br />- 更多字段见 <a href=\"https://www.yuque.com/antv/g6/ilnhgt#qWf35\" target=\"_self\" rel=\"nofollow\">diamond 节点的配置</a><br /></td>\n<td><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570852597814-e4e4585a-fbe0-41a4-af92-a2de2f837220.png#align=left&display=inline&height=92&name=image.png&originHeight=184&originWidth=178&search=&size=20859&status=done&width=89\" alt=\"image.png\"></td>\n</tr>\n<tr>\n<td>triangle</td>\n<td>三角形：<br />- <code class=\"language-text\">size</code> 是数组，表示三角形的长和高<br />- 三角形的中心位置是节点的位置<br />- <code class=\"language-text\">color</code> 字段默认在描边上生效<br />- 标签文本默认在节点下方<br />- 更多字段见 <a href=\"https://www.yuque.com/antv/g6/sfcm38#qWf35\" target=\"_self\" rel=\"nofollow\">triangle 节点的配置</a><br /></td>\n<td><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570852606815-2f8526a8-1349-452e-a9f7-dccb37be57f9.png#align=left&display=inline&height=78&name=image.png&originHeight=156&originWidth=126&search=&size=11213&status=done&width=63\" alt=\"image.png\"></td>\n</tr>\n<tr>\n<td>star</td>\n<td>星形：<br />- <code class=\"language-text\">size</code> 是单个数字，表示星形的大小<br />- 星星的中心位置是节点的位置<br />- <code class=\"language-text\">color</code> 字段默认在描边上生效<br />- 标签文本默认在节点中央<br />- 更多字段见 <a href=\"https://www.yuque.com/antv/g6/gwn2mq#qWf35\" target=\"_self\" rel=\"nofollow\">star 节点的配置</a><br /></td>\n<td><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570852618082-bfe59c69-08ce-4538-be49-ee72984c4830.png#align=left&display=inline&height=99&name=image.png&originHeight=198&originWidth=194&search=&size=24192&status=done&width=97\" alt=\"image.png\"></td>\n</tr>\n<tr>\n<td>image</td>\n<td>图片：<br />- <code class=\"language-text\">size</code> 是数组，表示图片的长和宽<br />- 图片的中心位置是节点位置<br />- <code class=\"language-text\">img</code> 图片的路径，也可以在 <code class=\"language-text\">style</code> 里面设置<br />- <code class=\"language-text\">color</code> 字段不生效<br />- 标签文本默认在节点下方<br />- 更多字段见 <a href=\"https://www.yuque.com/antv/g6/ng8a0q#qWf35\" target=\"_self\" rel=\"nofollow\">image 节点的配置</a><br /></td>\n<td><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570852649476-7c6c4aeb-8172-4a69-a6a3-b6cd24d7ea46.png#align=left&display=inline&height=67&name=image.png&originHeight=134&originWidth=112&search=&size=16354&status=done&width=56\" alt=\"image.png\"></td>\n</tr>\n<tr>\n<td>modelRect</td>\n<td>菱形：<br />- <code class=\"language-text\">size</code> 是数组，表示菱形的长和宽<br />- 菱形的中心位置是节点的位置<br />- <code class=\"language-text\">color</code> 字段默认在描边上生效<br />- 标签文本默认在节点中央<br />- 若有 <code class=\"language-text\">description</code> 字段则显示在标签文本下方显示 <code class=\"language-text\">description</code> 内容<br />- 更多字段见 <a href=\"https://www.yuque.com/antv/g6/sdfcpq#qWf35\" target=\"_self\" rel=\"nofollow\">modelRect 节点的配置</a><br /></td>\n<td><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570852629046-62c03494-82ac-4e76-b3b4-9ca242d9459a.png#align=left&display=inline&height=74&name=image.png&originHeight=148&originWidth=324&search=&size=15378&status=done&width=162\" alt=\"image.png\"><br /> <img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570852931313-42f193db-c9f0-4098-af7f-6c5eaf32923a.png#align=left&display=inline&height=69&name=image.png&originHeight=138&originWidth=316&search=&size=17261&status=done&width=158\" alt=\"image.png\"></td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"节点的通用属性\"><a href=\"#%E8%8A%82%E7%82%B9%E7%9A%84%E9%80%9A%E7%94%A8%E5%B1%9E%E6%80%A7\" 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<table>\n<thead>\n<tr>\n<th>名称</th>\n<th>是否必须</th>\n<th>类型</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>id</td>\n<td>true</td>\n<td>String</td>\n<td>节点编号</td>\n</tr>\n<tr>\n<td>x</td>\n<td>false</td>\n<td>Number</td>\n<td>x 坐标</td>\n</tr>\n<tr>\n<td>y</td>\n<td>false</td>\n<td>Number</td>\n<td>y 坐标</td>\n</tr>\n<tr>\n<td>shape</td>\n<td>false</td>\n<td>String</td>\n<td>节点图形，默认为 <code class=\"language-text\">'circle'</code></td>\n</tr>\n<tr>\n<td>size</td>\n<td>false</td>\n<td>Number</td>\n<td>Array</td>\n</tr>\n<tr>\n<td>anchorPoints</td>\n<td>false</td>\n<td>Array</td>\n<td>指定边连如节点的连接点的位置（相对于该节点而言），可以为空。例如: <code class=\"language-text\">[0, 0]</code>，代表节点左上角的锚点，<code class=\"language-text\">[1, 1]</code>,代表节点右下角的锚点。</td>\n</tr>\n<tr>\n<td>style</td>\n<td>false</td>\n<td>Object</td>\n<td>节点的样式属性</td>\n</tr>\n<tr>\n<td>label</td>\n<td>false</td>\n<td>String</td>\n<td>文本文字</td>\n</tr>\n<tr>\n<td>labelCfg</td>\n<td>false</td>\n<td>Object</td>\n<td>文本配置项</td>\n</tr>\n</tbody>\n</table>\n<h4 id=\"样式属性-style\"><a href=\"#%E6%A0%B7%E5%BC%8F%E5%B1%9E%E6%80%A7-style\" aria-label=\"样式属性 style 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>样式属性 style</h4>\n<p>Object 类型。通过 <code class=\"language-text\">style</code> 配置来修改节点的填充色、边框颜色、阴影等属性。下表是 <code class=\"language-text\">style</code> 对象中常用的配置项：</p>\n<table>\n<thead>\n<tr>\n<th>名称</th>\n<th>是否必须</th>\n<th>类型</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>fill</td>\n<td>false</td>\n<td>String</td>\n<td>节点填充色</td>\n</tr>\n<tr>\n<td>stroke</td>\n<td>false</td>\n<td>String</td>\n<td>节点的描边颜色</td>\n</tr>\n<tr>\n<td>lineWidth</td>\n<td>false</td>\n<td>Number</td>\n<td>描边宽度</td>\n</tr>\n<tr>\n<td>shadowColor</td>\n<td>false</td>\n<td>String</td>\n<td>阴影颜色</td>\n</tr>\n<tr>\n<td>shadowBlur</td>\n<td>false</td>\n<td>Number</td>\n<td>阴影范围</td>\n</tr>\n<tr>\n<td>shadowOffsetX</td>\n<td>false</td>\n<td>Number</td>\n<td>阴影 x 方向偏移量</td>\n</tr>\n<tr>\n<td>shadowOffsetX</td>\n<td>false</td>\n<td>Number</td>\n<td>阴影 y 方向偏移量</td>\n</tr>\n<tr>\n<td>...</td>\n<td></td>\n<td></td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<p>下面代码演示在实例化图时全局配置方法中配置 <code class=\"language-text\">style</code>：</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>\n width<span class=\"token punctuation\">:</span> <span class=\"token number\">800</span><span class=\"token punctuation\">,</span>\n height<span class=\"token punctuation\">:</span> <span class=\"token number\">600</span><span class=\"token punctuation\">,</span>\n defaultNode<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// ... 其他属性</span>\n style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'#steelblue'</span><span class=\"token punctuation\">,</span>\n stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'#eaff8f'</span><span class=\"token punctuation\">,</span>\n lineWidth<span class=\"token punctuation\">:</span> <span class=\"token number\">5</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// ... 其他属性</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"标签文本-label-及其配置-labelcfg\"><a href=\"#%E6%A0%87%E7%AD%BE%E6%96%87%E6%9C%AC-label-%E5%8F%8A%E5%85%B6%E9%85%8D%E7%BD%AE-labelcfg\" aria-label=\"标签文本 label 及其配置 labelcfg 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>标签文本 label 及其配置 labelCfg</h4>\n<p><code class=\"language-text\">label</code> String 类型。标签文本的文字内容。<br /><code class=\"language-text\">labelCfg</code> Object 类型。配置标签文本。下面是 <code class=\"language-text\">labelCfg</code> 对象中的常用配置项：</p>\n<table>\n<thead>\n<tr>\n<th>名称</th>\n<th>是否必须</th>\n<th>类型</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>position</td>\n<td>false</td>\n<td>String</td>\n<td>文本相对于节点的位置，目前支持的位置有: <code class=\"language-text\">'center'</code>，<code class=\"language-text\">'top'</code>，<code class=\"language-text\">'left'</code>，<code class=\"language-text\">'right'</code>，<code class=\"language-text\">'bottom'</code>。默认为 <code class=\"language-text\">'center'</code>。</td>\n</tr>\n<tr>\n<td>offset</td>\n<td>false</td>\n<td>Number</td>\n<td>Array</td>\n</tr>\n<tr>\n<td>style</td>\n<td>false</td>\n<td>Object</td>\n<td>标签的样式属性</td>\n</tr>\n</tbody>\n</table>\n<p>上表中的标签的样式属性 <code class=\"language-text\">style</code> 的常用配置项如下： </p>\n<table>\n<thead>\n<tr>\n<th>名称</th>\n<th>是否必须</th>\n<th>类型</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>fill</td>\n<td>false</td>\n<td>String</td>\n<td>文本颜色</td>\n</tr>\n<tr>\n<td>stroke</td>\n<td>false</td>\n<td>String</td>\n<td>文本描边颜色</td>\n</tr>\n<tr>\n<td>lineWidth</td>\n<td>false</td>\n<td>Number</td>\n<td>文本描边粗细</td>\n</tr>\n<tr>\n<td>opacity</td>\n<td>false</td>\n<td>Number</td>\n<td>文本透明度</td>\n</tr>\n<tr>\n<td>font</td>\n<td>false</td>\n<td>String</td>\n<td>文本内容的当前字体属性</td>\n</tr>\n<tr>\n<td>fontSize</td>\n<td>false</td>\n<td>Number</td>\n<td>文本字体大小</td>\n</tr>\n<tr>\n<td>...</td>\n<td></td>\n<td></td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<p>下面代码演示在实例化图时全局配置方法中配置 <code class=\"language-text\">label</code> 和 <code class=\"language-text\">labelCfg</code>。</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>\n width<span class=\"token punctuation\">:</span> <span class=\"token number\">800</span><span class=\"token punctuation\">,</span>\n height<span class=\"token punctuation\">:</span> <span class=\"token number\">600</span><span class=\"token punctuation\">,</span>\n defaultNode<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// ... 其他属性</span>\n label<span class=\"token punctuation\">:</span> <span class=\"token string\">'node-label'</span><span class=\"token punctuation\">,</span>\n labelCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n position<span class=\"token punctuation\">:</span> <span class=\"token string\">'bottom'</span><span class=\"token punctuation\">,</span>\n offset<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">10</span><span class=\"token punctuation\">,</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span> <span class=\"token number\">10</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'#666'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"节点的配置方法\"><a href=\"#%E8%8A%82%E7%82%B9%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E6%B3%95\" 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\">graph.node(nodeFn)</code> 函数配置。这几种配置方法可以同时使用，优先级：</p>\n<p>使用 graph.node(nodeFn) 配置 > 数据中动态配置 > 实例化图时全局配置</p>\n<p>即有相同的配置项时，优先级高的方式将会覆盖优先级低的。</p>\n<h3 id=\"实例化图时全局配置\"><a href=\"#%E5%AE%9E%E4%BE%8B%E5%8C%96%E5%9B%BE%E6%97%B6%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE\" aria-label=\"实例化图时全局配置 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 时候可以通过 <code class=\"language-text\">defaultNode</code> 配置节点，这里的配置是全局的配置，将会在所有节点上生效。</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>\n width<span class=\"token punctuation\">:</span> <span class=\"token number\">800</span><span class=\"token punctuation\">,</span>\n height<span class=\"token punctuation\">:</span> <span class=\"token number\">600</span><span class=\"token punctuation\">,</span>\n defaultNode<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'circle'</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 其他配置</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"在数据中动态配置\"><a href=\"#%E5%9C%A8%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%8A%A8%E6%80%81%E9%85%8D%E7%BD%AE\" aria-label=\"在数据中动态配置 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=\"text\"><pre class=\"language-text\"><code class=\"language-text\">const data = {\n nodes: [{\n id: 'node0',\n size: 100,\n shape: 'rect',\n ... // 其他属性\n style: {\n ... // 样式属性，每种节点的详细样式属性参见各节点文档\n }\n },{\n id: 'node1',\n size: [50, 100],\n shape: 'ellipse',\n ... // 其他属性\n style: {\n ... // 样式属性，每种节点的详细样式属性参见各节点文档\n }\n },\n ... // 其他节点\n ],\n edges: [\n ... // 边\n ]\n}</code></pre></div>\n<h3 id=\"使用-graphnodenodefn-配置\"><a href=\"#%E4%BD%BF%E7%94%A8-graphnodenodefn-%E9%85%8D%E7%BD%AE\" aria-label=\"使用 graphnodenodefn 配置 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.node(nodeFn) 配置</h3>\n<p>该方法可以为不同节点进行不同的配置。<br />提示：</p>\n<ul>\n<li>该方法必须<strong>在 render 之前调用</strong>，否则不起作用；</li>\n<li>由于该方法优先级最高，将覆盖其他地方对节点的配置，这可能将造成一些其他配置不生效的疑惑；</li>\n<li>该方法在增加元素、更新元素时会被调用，如果数据量大、每个节点上需要更新的内容多时，可能会有性能问题。</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">// const data = ...\n// const graph = ...\ngraph.node((node) => {\n return {\n id: node.id,\n shape: 'rect',\n style: {\n fill: 'blue'\n }\n }\n});\n\ngraph.data(data);\ngraph.render();</code></pre></div>\n<h2 id=\"实例演练\"><a href=\"#%E5%AE%9E%E4%BE%8B%E6%BC%94%E7%BB%83\" 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<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">const data = {\n nodes: [{\n x: 100,\n y: 100,\n shape: 'circle',\n label: 'circle',\n },{\n x: 200,\n y: 100,\n shape: 'rect',\n \tlabel: 'rect',\n },{\n id: 'node-ellipse',\n x: 330,\n y: 100,\n shape: 'ellipse',\n \tlabel: 'ellipse'\n },{\n id: 'node-diamond',\n x: 460,\n y: 100,\n shape: 'diamond',\n \tlabel: 'diamond'\n },{\n id: 'node-triangle',\n x: 560,\n y: 100,\n //size: 80,\n shape: 'triangle',\n \tlabel: 'triangle'\n },{\n id: 'node-star',\n x: 660,\n y: 100,\n //size: [60, 30],\n shape: 'star',\n \tlabel: 'star'\n },{\n x: 760,\n y: 100,\n size: 50,\n shape: 'image',\n img: 'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg',\n \tlabel: 'image',\n },{\n id: 'node-modelRect',\n x: 900,\n y: 100,\n shape: 'modelRect',\n \tlabel: 'modelRect'\n }]\n};\n\nconst graph = new G6.Graph({\n\tcontainer: 'mountNode',\n width: 1500,\n height: 300\n});\ngraph.data(data);\ngraph.render();</code></pre></div>\n<p>显示结果：\n<br />\n<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1570866064078-162301ab-e5c6-41c0-8009-030aba5ac216.png#align=left&display=inline&height=98&name=image.png&originHeight=196&originWidth=1530&search=&size=123948&status=done&width=765' width='750' height='100'></p>\n<ul>\n<li>triangle 节点和 image 节点的标签文本默认位置为：<code class=\"language-text\">position:'bottom'</code> ，其他节点文本的默认位置都为：<code class=\"language-text\">position: 'center'</code>；</li>\n</ul>\n<h3 id=\"调整节点配置\"><a href=\"#%E8%B0%83%E6%95%B4%E8%8A%82%E7%82%B9%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>调整节点配置</h3>\n<p>下面演示通过将配置写入数据的方式，调整 <code class=\"language-text\">id</code> 为 <code class=\"language-text\">'node-ellipse'</code> 的椭圆节点的文本位置，颜色和样式。将下面代码替换上面代码中 <code class=\"language-text\">id</code> 为 <code class=\"language-text\">'node-ellipse'</code> 的节点数据即可生效。</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">{\n id: 'node-ellipse',\n x: 330,\n y: 100,\n shape: 'ellipse',\t\n size: [60, 30],\n label: 'ellipse',\n labelCfg: {\n position: 'bottom',\n offset: 5\n },\n style: {\n fill: '#fa8c16',\n stroke: '#000',\n lineWidth: 2\n }\n}</code></pre></div>\n<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1570866208293-efddc382-b519-421a-a50c-20a5b6651995.png#align=left&display=inline&height=110&name=image.png&originHeight=220&originWidth=1556&search=&size=126345&status=done&width=778' width='750' height='100'>\n<p>再为 <code class=\"language-text\">id</code> 为 <code class=\"language-text\">'node-modelRect'</code> 的 modelRect 节点添加描述文字，使用下面代码替换 <code class=\"language-text\">id</code> 为 <code class=\"language-text\">'node-modelRect'</code> 的节点数据即可得到带有内容为 '描述文本xxxxxxxxxxx' 的 modelRect 节点。</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">{\n id: 'node-modelRect',\n x: 900,\n y: 100,\n description: '描述文本xxxxxxxxxxx',\n shape: 'modelRect',\n label: 'modelRect'\n}</code></pre></div>\n<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1570866381579-8296a2bb-9f23-45a5-b229-fe82b55a7a5b.png#align=left&display=inline&height=110&name=image.png&originHeight=220&originWidth=1524&search=&size=135905&status=done&width=762' width='750' height='100'>\n<h2 id=\"相关阅读\"><a href=\"#%E7%9B%B8%E5%85%B3%E9%98%85%E8%AF%BB\" 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<ul>\n<li><a href=\"../../states/state\">状态 State</a> —— 交互过程中的样式变化。</li>\n</ul>"}