@antv/g6
Version:
graph visualization frame work
1 lines • 34.9 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-c0653f4ce454a7be72acc3dcb67c32cb-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<p>G6 提供了 9 种内置边：</p>\n<ul>\n<li>line：直线，不支持控制点；</li>\n<li>polyline：折线，支持多个控制点；</li>\n<li>arc：圆弧线；</li>\n<li>quadratic：二阶贝塞尔曲线；</li>\n<li>cubic：三阶贝塞尔曲线；</li>\n<li>cubic-vertical：垂直方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；</li>\n<li>cubic-horizontal；水平方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；</li>\n<li>loop：自环。</li>\n</ul>\n<p>这些内置边的默认样式分别如下图所示。<br />\n<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1570858853371-d9c7fea4-5e7b-42e1-a2f4-559a70298149.png#align=left&display=inline&height=135&name=image.png&originHeight=270&originWidth=1768&search=&size=74956&status=done&width=884' width='750' height='200' /></p>\n<h2 id=\"内置边类型说明\"><a href=\"#%E5%86%85%E7%BD%AE%E8%BE%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>line</td>\n<td>连接两个节点的直线：<br />- controlPoints 不生效<br />- 更多配置详见 line 边的配置<br /></td>\n<td><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570858805015-2171552a-56fc-44f9-a8d0-608de6aeb3f8.png#align=left&display=inline&height=36&name=image.png&originHeight=72&originWidth=210&search=&size=6061&status=done&width=105\" alt=\"image.png\"></td>\n</tr>\n<tr>\n<td>polyline</td>\n<td>多段线段构成的折线，连接两个端点：<br />- controlPoints 表示所有线段的拐点，不指定时根据 <a href=\"https://yuque.alibaba-inc.com/antv/blog/polyline-edges-with-border-radius\" target=\"_self\" rel=\"nofollow\">A* 算法</a>自动生成折线<br />- 更多配置详见 polyline 边的配置<br /></td>\n<td><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570858897304-9b5e3045-4b8c-4e84-8373-7fda9ca2193a.png#align=left&display=inline&height=105&name=image.png&originHeight=210&originWidth=222&search=&size=12334&status=done&width=111\" alt=\"image.png\"></td>\n</tr>\n<tr>\n<td>arc</td>\n<td>连接两个节点的一段圆弧：<br />- controlPoints 不生效<br />- 使用 curveOffset 指定弧的弯曲程度，其正负影响弧弯曲的方向<br />- 更多配置详见 arc 边的配置<br /></td>\n<td><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570858921616-3dc5034d-ede0-425f-874b-620af6fe2dc9.png#align=left&display=inline&height=49&name=image.png&originHeight=98&originWidth=218&search=&size=8131&status=done&width=109\" alt=\"image.png\"></td>\n</tr>\n<tr>\n<td>quadratic</td>\n<td>只有一个控制点的曲线：<br />- controlPoints 不指定时，会默认线的一半处弯曲<br />- 更多配置详见 quadratic 边的配置<br /></td>\n<td><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570858940562-cea717dc-c0be-4bd1-af07-0f71e22f9243.png#align=left&display=inline&height=48&name=image.png&originHeight=96&originWidth=214&search=&size=8780&status=done&width=107\" alt=\"image.png\"></td>\n</tr>\n<tr>\n<td>cubic</td>\n<td>有两个控制点的曲线：<br />- controlPoints 不指定时，会默认线的 1/3, 2/3 处弯曲<br />- 更多配置详见 cubic 边的配置<br /></td>\n<td><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570858972322-2ba56d44-bd65-4fbb-9de2-a0c4bbbc8e8d.png#align=left&display=inline&height=36&name=image.png&originHeight=72&originWidth=216&search=&size=8066&status=done&width=108\" alt=\"image.png\"></td>\n</tr>\n<tr>\n<td>cubic-vertical</td>\n<td>垂直方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点</td>\n<td><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570858985655-b18e4465-0534-4dbf-a097-460a967d1100.png#align=left&display=inline&height=109&name=image.png&originHeight=218&originWidth=222&search=&size=15336&status=done&width=111\" alt=\"image.png\"></td>\n</tr>\n<tr>\n<td>cubic-horizontal</td>\n<td>水平方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点</td>\n<td><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570858999282-e9e4d9c1-f2da-4804-975f-d4abed62933f.png#align=left&display=inline&height=114&name=image.png&originHeight=228&originWidth=206&search=&size=16769&status=done&width=103\" alt=\"image.png\"></td>\n</tr>\n<tr>\n<td>loop</td>\n<td>自环。更多配置详见 arc 边的配置</td>\n<td><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570859007824-5b9c3023-9851-4bda-917b-3216811d2e45.png#align=left&display=inline&height=56&name=image.png&originHeight=112&originWidth=76&search=&size=6558&status=done&width=38\" alt=\"image.png\"></td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"边的通用属性\"><a href=\"#%E8%BE%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>false</td>\n<td>String</td>\n<td>边编号</td>\n</tr>\n<tr>\n<td>source</td>\n<td>true</td>\n<td>String</td>\n<td>Number</td>\n</tr>\n<tr>\n<td>target</td>\n<td>true</td>\n<td>String</td>\n<td>结束点 id</td>\n</tr>\n<tr>\n<td>shape</td>\n<td>false</td>\n<td>String</td>\n<td>边图形，默认为 'line'</td>\n</tr>\n<tr>\n<td>sourceAnchor</td>\n<td>false</td>\n<td>Number</td>\n<td>边的起始节点上的锚点的索引值</td>\n</tr>\n<tr>\n<td>targetAnchor</td>\n<td>false</td>\n<td>Number</td>\n<td>边的终止节点上的锚点的索引值</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>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>lineAppendWidth</td>\n<td>false</td>\n<td>Number</td>\n<td>边响应鼠标事件时的检测宽度，当 <code class=\"language-text\">lineWidth</code> 太小而不易选中时，可以通过该参数提升击中范围</td>\n</tr>\n<tr>\n<td>endArrow</td>\n<td>false</td>\n<td>Boolean</td>\n<td>边的结束端是否有箭头</td>\n</tr>\n<tr>\n<td>strokeOpacity</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 defaultEdge<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 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>refX</td>\n<td>false</td>\n<td>Number</td>\n<td>标签在 x 方向的偏移量</td>\n</tr>\n<tr>\n<td>refY</td>\n<td>false</td>\n<td>Number</td>\n<td>标签在 y 方向的偏移量</td>\n</tr>\n<tr>\n<td>position</td>\n<td>false</td>\n<td>String</td>\n<td>文本相对于边的位置，目前支持的位置有: <code class=\"language-text\">start</code>，<code class=\"language-text\">middle</code>, <code class=\"language-text\">end</code>。默认为<code class=\"language-text\">middle</code>。</td>\n</tr>\n<tr>\n<td>autoRotate</td>\n<td>false</td>\n<td>Boolean</td>\n<td>标签文字是否跟随边旋转，默认 <code class=\"language-text\">false</code></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 defaultEdge<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\">'edge-label'</span><span class=\"token punctuation\">,</span>\n labelCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n refY<span class=\"token punctuation\">:</span> <span class=\"token operator\">-</span><span class=\"token number\">10</span><span class=\"token punctuation\">,</span>\n refX<span class=\"token punctuation\">:</span> <span class=\"token number\">60</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%BE%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.edge(edgeFn)</code> 函数配置。这几种配置方法可以同时使用，优先级：</p>\n<p>使用 graph.edge(edgeFn) 配置 > 数据中动态配置 > 实例化图时全局配置</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\">defaultEdge</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 defaultEdge<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'line'</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=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n nodes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token operator\">...</span> <span class=\"token comment\">// 节点</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n edges<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">{</span>\n source<span class=\"token punctuation\">:</span> <span class=\"token string\">'node0'</span><span class=\"token punctuation\">,</span>\n target<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span>\n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'polyline'</span><span class=\"token punctuation\">,</span>\n <span class=\"token operator\">...</span> <span class=\"token comment\">// 其他配置</span>\n style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token operator\">...</span> <span class=\"token comment\">// 样式属性，每种边的详细样式属性参见各边文档</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span><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 shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'cubic'</span><span class=\"token punctuation\">,</span>\n <span class=\"token operator\">...</span> <span class=\"token comment\">// 其他配置</span>\n style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token operator\">...</span> <span class=\"token comment\">// 样式属性，每种边的详细样式属性参见各边文档</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token operator\">...</span> <span class=\"token comment\">// 其他边</span>\n <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h3 id=\"使用-graphedgeedgefn-配置\"><a href=\"#%E4%BD%BF%E7%94%A8-graphedgeedgefn-%E9%85%8D%E7%BD%AE\" aria-label=\"使用 graphedgeedgefn 配置 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.edge(edgeFn) 配置</h3>\n<p>该方法可以为不同边进行不同的配置。<br />提示：</p>\n<ul>\n<li>该方法必须<strong>在 render 之前调用</strong>，否则不起作用；</li>\n<li>由于该方法优先级最高，将覆盖其他地方对边的配置，这可能将造成一些其他配置不生效的疑惑；</li>\n<li>\n<p>该方法在增加元素、更新元素时会被调用，如果数据量大、每条边上需要更新的内容多时，可能会有性能问题。</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// const data = ...</span>\n<span class=\"token comment\">// const graph = ...</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">edge</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">edge</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> edge<span class=\"token punctuation\">.</span>id<span class=\"token punctuation\">,</span>\n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'polyline'</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\">'steelblue'</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</li>\n</ul>\n<p>graph.data(data);\ngraph.render();</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">## 实例演示\n```javascript\nconst data = {\n nodes: [\n {id: '1', x: 50, y: 50, size: 20},\n {id: '2', x: 150, y: 50, size: 20},\n {id: '3', x: 200, y: 50, size: 20},\n {id: '4', x: 300, y: 130, size: 20},\n {id: '5', x: 350, y: 50, size: 20},\n {id: '6', x: 450, y: 50, size: 20},\n {id: '7', x: 500, y: 50, size: 20},\n {id: '8', x: 600, y: 50, size: 20},\n {id: '9', x: 650, y: 50, size: 20},\n {id: '10', x: 750, y: 50, size: 20},\n {id: '11', x: 800, y: 50, size: 20},\n {id: '12', x: 900, y: 150, size: 20},\n {id: '13', x: 950, y: 50, size: 20},\n {id: '14', x: 1050, y: 150, size: 20},\n {id: '15', x: 1100, y: 50, size: 20},\n ],\n edges: [\n {source: '1', target: '2', shape: 'line', label: 'line'},\n {source: '3', target: '4', shape: 'polyline', label: 'polyline'},\n {source: '5', target: '6', shape: 'arc', label: 'arc'},\n {source: '7', target: '8', shape: 'quadratic', label: 'quadratic'},\n {source: '9', target: '10', shape: 'cubic', label: 'cubic'},\n {source: '11', target: '12', shape: 'cubic-vertical', label: 'cubic-vertical'},\n {source: '13', target: '14', shape: 'cubic-horizontal', label: 'cubic-horizontal'},\n {source: '15', target: '15', shape: 'loop', label: 'loop'}\n ]\n}\n\nconst graph = new G6.Graph({\n\tcontainer: 'mountNode',\n width: 1500,\n height: 300,\n linkCenter: true // 使边连入节点的中心\n});\ngraph.data(data);\ngraph.render();</code></pre></div>\n<p>显示结果：<br />\n<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1570858853371-d9c7fea4-5e7b-42e1-a2f4-559a70298149.png#align=left&display=inline&height=135&name=image.png&originHeight=270&originWidth=1768&search=&size=74956&status=done&width=884' width='750' height='200' /></p>\n<h3 id=\"调整边的样式\"><a href=\"#%E8%B0%83%E6%95%B4%E8%BE%B9%E7%9A%84%E6%A0%B7%E5%BC%8F\" 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>可以在边上添加文本，修改边的样式。下面演示将配置写入数据的方式配置边。使用下面代码替换上面代码中的 9-10、11-12 两条边数据，修改这两条边的样式和其文本。</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 使 9-10 的 cubic 边文本下移 15 像素</span>\n<span class=\"token punctuation\">{</span>\n source<span class=\"token punctuation\">:</span> <span class=\"token string\">'9'</span><span class=\"token punctuation\">,</span> \n target<span class=\"token punctuation\">:</span> <span class=\"token string\">'10'</span><span class=\"token punctuation\">,</span> \n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'cubic'</span><span class=\"token punctuation\">,</span>\n label<span class=\"token punctuation\">:</span> <span class=\"token string\">'cubic'</span><span class=\"token punctuation\">,</span>\n labelCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n refY<span class=\"token punctuation\">:</span> <span class=\"token operator\">-</span><span class=\"token number\">15</span> <span class=\"token comment\">// refY 默认是顺时针方向向下，所以需要设置负值</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token comment\">// 设置 11-12 的 cubic-vertical 边的颜色、虚线、粗细，并设置文本样式、随边旋转</span>\n<span class=\"token punctuation\">{</span>\n source<span class=\"token punctuation\">:</span> <span class=\"token string\">'11'</span><span class=\"token punctuation\">,</span> \n target<span class=\"token punctuation\">:</span> <span class=\"token string\">'12'</span><span class=\"token punctuation\">,</span>\n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'cubic-vertical'</span><span class=\"token punctuation\">,</span>\n color<span class=\"token punctuation\">:</span> <span class=\"token string\">'#722ed1'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 边颜色</span>\n size<span class=\"token punctuation\">:</span> <span class=\"token number\">5</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 边粗细</span>\n style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n \tlineDash<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span> <span class=\"token comment\">// 虚线边</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n label<span class=\"token punctuation\">:</span> <span class=\"token string\">'cubic-vertical'</span><span class=\"token punctuation\">,</span>\n labelCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n \tposition<span class=\"token punctuation\">:</span> <span class=\"token string\">'center'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 其实默认就是 center，这里写出来便于理解</span>\n autoRotate<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 使文本随边旋转</span>\n style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'white'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 给文本添加白边和白色背景</span>\n \tlineWidth<span class=\"token punctuation\">:</span> <span class=\"token number\">5</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 文本白边粗细</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'#722ed1'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 文本颜色</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1570859444095-76fc5c73-0444-4636-b2a2-57eb1786987c.png#align=left&display=inline&height=138&name=image.png&originHeight=276&originWidth=1782&search=&size=81146&status=done&width=891' width='750' height='200' />\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>"}