@antv/g6
Version:
graph visualization frame work
1 lines • 34.8 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-2b67522e0c8661f76e2e35403725cb18-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<p>G6 内置了方形卡片 modelRect 节点，其默认样式如下。标签文本位于卡片下方。\n<br /></p>\n<img src='https://cdn.nlark.com/yuque/0/2019/png/244306/1569832510250-8ee79163-f2e3-4bce-8ed5-c9935a63ddf2.png' width='223' height='102' />\n<img src='https://cdn.nlark.com/yuque/0/2019/png/244306/1569832510241-4fe098ed-c246-49c7-83f6-ee1f6aef7958.png' width='223' height='98' />\n<p><br />说明 数据中无 <code class=\"language-text\">description</code> 字段时，则不显示描述信息。</p>\n<h2 id=\"使用方法\"><a href=\"#%E4%BD%BF%E7%94%A8%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>如 <a href=\"../defaultNode\">内置节点</a> 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。</p>\n<h3 id=\"1-实例化图时全局配置\"><a href=\"#1-%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=\"1 实例化图时全局配置 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>1 实例化图时全局配置</h3>\n<p>用户在实例化 Graph 时候可以通过 <code class=\"language-text\">defaultNode</code> 指定 <code class=\"language-text\">shape</code> 为 <code class=\"language-text\">'modelRect'</code>，即可使用 <code class=\"language-text\">modelRect</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\">'modelRect'</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=\"2-在数据中动态配置\"><a href=\"#2-%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=\"2 在数据中动态配置 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>2 在数据中动态配置</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><span class=\"token punctuation\">{</span>\n\t id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node0'</span><span class=\"token punctuation\">,</span>\n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'modelRect'</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 <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>\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<h2 id=\"配置项说明\"><a href=\"#%E9%85%8D%E7%BD%AE%E9%A1%B9%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>modelRect 节点支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解：</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>size</td>\n<td>圆的直径</td>\n<td>Number</td>\n<td>Array</td>\n</tr>\n<tr>\n<td>style</td>\n<td>circle 默认样式</td>\n<td>Object</td>\n<td>Canvas 支持的属性</td>\n</tr>\n<tr>\n<td>labelCfg</td>\n<td>文件配置项</td>\n<td>Object</td>\n<td></td>\n</tr>\n<tr>\n<td>stateStyles</td>\n<td>各状态下的样式</td>\n<td>Object</td>\n<td>只对 keyShape 起作用</td>\n</tr>\n<tr>\n<td>linkPoints</td>\n<td>相关边的连入点</td>\n<td>Object</td>\n<td>默认不显示</td>\n</tr>\n<tr>\n<td>icon</td>\n<td>圆上 icon 配置</td>\n<td>Object</td>\n<td>默认不显示 icon</td>\n</tr>\n</tbody>\n</table>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"> <span class=\"token comment\">// 节点中icon配置</span>\n logoIcon<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 是否显示icon，值为 false 则不渲染icon</span>\n show<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// icon的地址，字符串类型</span>\n img<span class=\"token punctuation\">:</span> <span class=\"token string\">'https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg'</span><span class=\"token punctuation\">,</span>\n width<span class=\"token punctuation\">:</span> <span class=\"token number\">16</span><span class=\"token punctuation\">,</span>\n height<span class=\"token punctuation\">:</span> <span class=\"token number\">16</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 用于调整图标的左右位置</span>\n offset<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 节点中表示状态的icon配置</span>\n stateIcon<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 是否显示icon，值为 false 则不渲染icon</span>\n show<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// icon的地址，字符串类型</span>\n img<span class=\"token punctuation\">:</span> <span class=\"token string\">'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg'</span><span class=\"token punctuation\">,</span>\n width<span class=\"token punctuation\">:</span> <span class=\"token number\">16</span><span class=\"token punctuation\">,</span>\n height<span class=\"token punctuation\">:</span> <span class=\"token number\">16</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 用于调整图标的左右位置</span>\n offset<span class=\"token punctuation\">:</span> <span class=\"token operator\">-</span><span class=\"token number\">5</span>\n <span class=\"token punctuation\">}</span></code></pre></div>\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>size</td>\n<td>modelRect的宽高</td>\n<td>Number</td>\n<td>Array</td>\n</tr>\n<tr>\n<td>style</td>\n<td>modelRect默认样式</td>\n<td>Object</td>\n<td>Canvas 支持的属性</td>\n</tr>\n<tr>\n<td>labelCfg</td>\n<td>文件配置项</td>\n<td>Object</td>\n<td></td>\n</tr>\n<tr>\n<td>stateStyles</td>\n<td>各状态下的样式</td>\n<td>Object</td>\n<td>只对 keyShape 起作用</td>\n</tr>\n<tr>\n<td>linkPoints</td>\n<td>modelRect上的链接点</td>\n<td>Object</td>\n<td>默认不显示</td>\n</tr>\n<tr>\n<td><strong>preRect</strong></td>\n<td><strong>左侧的小矩形</strong></td>\n<td><strong>Object</strong></td>\n<td><strong>modelRect 节点特有</strong></td>\n</tr>\n<tr>\n<td><strong>logoIcon</strong></td>\n<td><strong>左侧的logo图标</strong></td>\n<td><strong>Object</strong></td>\n<td><strong>modelRect 节点特有</strong></td>\n</tr>\n<tr>\n<td><strong>stateIcon</strong></td>\n<td><strong>右侧的状态图标</strong></td>\n<td><strong>Object</strong></td>\n<td><strong>modelRect 节点特有</strong></td>\n</tr>\n</tbody>\n</table>\n<h3 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</h3>\n<p>Object 类型。通过 <code class=\"language-text\">style</code> 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 <code class=\"language-text\">style</code>，使之达到如下图效果。<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570872406414-bb854465-1588-4499-abec-43d503bd2b23.png#align=left&display=inline&height=84&name=image.png&originHeight=168&originWidth=346&search=&size=17886&status=done&width=173\" alt=\"image.png\"></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 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\">100</span><span class=\"token punctuation\">,</span>\n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'modelRect'</span><span class=\"token punctuation\">,</span>\n label<span class=\"token punctuation\">:</span> <span class=\"token string\">'modelRect'</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 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\">// shape: 'modelRect', // 在数据中已经指定 shape，这里无需再次指定</span>\n size<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">200</span><span class=\"token punctuation\">,</span> <span class=\"token number\">80</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\">'#f0f5ff'</span><span class=\"token punctuation\">,</span>\n stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'#adc6ff'</span><span class=\"token punctuation\">,</span>\n lineWidth<span class=\"token punctuation\">:</span> <span class=\"token number\">2</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>\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>\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<h3 id=\"标签文本配置-labelcfg\"><a href=\"#%E6%A0%87%E7%AD%BE%E6%96%87%E6%9C%AC%E9%85%8D%E7%BD%AE-labelcfg\" aria-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>标签文本配置 labelCfg</h3>\n<p>Object 类型。通过 <code class=\"language-text\">labelCfg</code> 配置标签文本。基于上面 <a href=\"#%E6%A0%B7%E5%BC%8F%E5%B1%9E%E6%80%A7-style\">样式属性 style</a> 中的代码，下面代码在 <code class=\"language-text\">defaultNode</code> 中增加了 <code class=\"language-text\">labelCfg</code> 配置项进行文本的配置，使之达到如下图效果。<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570872488038-a22d3fd4-626f-4ac6-a85e-ad8aa17ce02e.png#align=left&display=inline&height=85&name=image.png&originHeight=170&originWidth=340&search=&size=20541&status=done&width=170\" alt=\"image.png\"></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 <span class=\"token comment\">// ... data 内容</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</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 <span class=\"token comment\">// ... 图的其他属性</span>\n defaultNode<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// ... 节点其他属性</span>\n labelCfg<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\">'#9254de'</span><span class=\"token punctuation\">,</span>\n fontSize<span class=\"token punctuation\">:</span> <span class=\"token number\">18</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<span class=\"token comment\">// ...</span>\n</code></pre></div>\n<h3 id=\"边的连入点-linkpoints\"><a href=\"#%E8%BE%B9%E7%9A%84%E8%BF%9E%E5%85%A5%E7%82%B9-linkpoints\" aria-label=\"边的连入点 linkpoints 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>边的连入点 linkPoints</h3>\n<p>Object 类型。通过配置 <code class=\"language-text\">linkPoints</code> ，可以指定 modelRect 周围「上、下、左、右」四个方向上边的连入点。</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>top</td>\n<td>是否显示上部的连接点</td>\n<td>Boolean</td>\n<td>默认为 <code class=\"language-text\">false</code></td>\n</tr>\n<tr>\n<td>bottom</td>\n<td>是否显示底部的连接点</td>\n<td>Boolean</td>\n<td>默认为 <code class=\"language-text\">false</code></td>\n</tr>\n<tr>\n<td>left</td>\n<td>是否显示左侧的连接点</td>\n<td>Boolean</td>\n<td>默认为 <code class=\"language-text\">false</code></td>\n</tr>\n<tr>\n<td>right</td>\n<td>是否显示右侧的连接点</td>\n<td>Boolean</td>\n<td>默认为 <code class=\"language-text\">false</code></td>\n</tr>\n<tr>\n<td>size</td>\n<td>连接点的大小</td>\n<td>Number</td>\n<td>默认为 3</td>\n</tr>\n<tr>\n<td>fill</td>\n<td>连接点的填充色</td>\n<td>String</td>\n<td>默认为 <code class=\"language-text\">'#``72CC4A'</code></td>\n</tr>\n<tr>\n<td>stroke</td>\n<td>连接点的边框颜色</td>\n<td>String</td>\n<td>默认为 <code class=\"language-text\">'#``72CC4A'</code></td>\n</tr>\n<tr>\n<td>lineWidth</td>\n<td>连接点边框的宽度</td>\n<td>Number</td>\n<td>默认为 1</td>\n</tr>\n</tbody>\n</table>\n<p>基于上面 <a href=\"#819eF\">样式属性 style</a> 中的代码，下面代码在 <code class=\"language-text\">defaultNode</code> 中增加了 <code class=\"language-text\">linkPoints</code> 配置项进行连入点的配置，使之达到如下图效果。<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570872543743-2eed803f-826c-4d34-9e92-3149c225b7d0.png#align=left&display=inline&height=89&name=image.png&originHeight=178&originWidth=352&search=&size=27603&status=done&width=176\" alt=\"image.png\"></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 <span class=\"token comment\">// ... data 内容</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</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 <span class=\"token comment\">// ... 图的其他属性</span>\n defaultNode<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// ... 节点其他属性</span>\n linkPoints<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n top<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n bottom<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n left<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n right<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n size<span class=\"token punctuation\">:</span> <span class=\"token number\">5</span><span class=\"token punctuation\">,</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'#fff'</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<span class=\"token comment\">// ...</span>\n</code></pre></div>\n<h3 id=\"左侧矩形-prerect\"><a href=\"#%E5%B7%A6%E4%BE%A7%E7%9F%A9%E5%BD%A2-prerect\" aria-label=\"左侧矩形 prerect 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>左侧矩形 preRect</h3>\n<p>通过 <code class=\"language-text\">preRect</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>show</td>\n<td>是否显示左侧小矩形</td>\n<td>Boolean</td>\n<td>默认为 <code class=\"language-text\">true</code></td>\n</tr>\n<tr>\n<td>width</td>\n<td>左侧小矩形的宽度</td>\n<td>Number</td>\n<td>默认为 4</td>\n</tr>\n<tr>\n<td>fill</td>\n<td>左侧小矩形的填充色</td>\n<td>String</td>\n<td>默认为 <code class=\"language-text\">'#40a9ff'</code></td>\n</tr>\n<tr>\n<td>radius</td>\n<td>左侧小矩形的圆角弧度</td>\n<td>Number</td>\n<td>默认为 2</td>\n</tr>\n</tbody>\n</table>\n<p>基于上面 <a href=\"#%E6%A0%B7%E5%BC%8F%E5%B1%9E%E6%80%A7-style\">样式属性 style</a> 中的代码，下面代码在 <code class=\"language-text\">defaultNode</code> 中增加了 <code class=\"language-text\">preRect</code> 配置项进行左侧小矩形的配置，使之达到如下图效果。<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570872628931-779c4f40-0149-4264-8957-483c61212759.png#align=left&display=inline&height=91&name=image.png&originHeight=182&originWidth=350&search=&size=29456&status=done&width=175\" alt=\"image.png\"></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 <span class=\"token comment\">// ... data 内容</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</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 <span class=\"token comment\">// ... 图的其他属性</span>\n defaultNode<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// ... 节点其他属性</span>\n preRect<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 设置为false，则不显示</span>\n show<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'#f759ab'</span><span class=\"token punctuation\">,</span>\n width<span class=\"token punctuation\">:</span> <span class=\"token number\">8</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<span class=\"token comment\">// ...</span>\n</code></pre></div>\n<h3 id=\"图标-logoicon--stateicon\"><a href=\"#%E5%9B%BE%E6%A0%87-logoicon--stateicon\" aria-label=\"图标 logoicon stateicon 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>图标 logoIcon / stateIcon</h3>\n<p>通过 <code class=\"language-text\">logoIcon</code> 和 <code class=\"language-text\">stateIcon</code> 可以配置左侧的 logo 小图标和右边的状态小图标，这两个的配置项完全相同。</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>show</td>\n<td>是否显示图标</td>\n<td>Boolean</td>\n<td>默认为 <code class=\"language-text\">true</code></td>\n</tr>\n<tr>\n<td>img</td>\n<td>图标图片</td>\n<td>String</td>\n<td><br />- 左侧图标 <code class=\"language-text\">logoIcon</code> 的图片默认为 <img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570872960571-1d34ed4b-0121-4bc8-9ecd-4a5ba6fb16f5.png#align=left&display=inline&height=23&name=image.png&originHeight=46&originWidth=42&search=&size=1504&status=done&width=21\" alt=\"image.png\"><br />- 右侧图标 <code class=\"language-text\">stateIcon</code> 的图片默认为<img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570873009462-d278c508-4648-4521-b0c6-77b7c3459ca7.png#align=left&display=inline&height=24&name=image.png&originHeight=48&originWidth=38&search=&size=3597&status=done&width=19\" alt=\"image.png\"><br /></td>\n</tr>\n<tr>\n<td>width</td>\n<td>图标的宽度</td>\n<td>Number</td>\n<td>默认为 16</td>\n</tr>\n<tr>\n<td>height</td>\n<td>图标的高度</td>\n<td>Number</td>\n<td>默认为 16</td>\n</tr>\n<tr>\n<td>offset</td>\n<td>图标的左右偏移量</td>\n<td>Number</td>\n<td><br />- 左侧图标 <code class=\"language-text\">logoIcon</code> 的 <code class=\"language-text\">offset</code> 默认为 0<br />- 右侧图标 <code class=\"language-text\">stateIcon</code> 的 <code class=\"language-text\">offset</code> 默认为 -5<br /></td>\n</tr>\n</tbody>\n</table>\n<p>基于上面 <a href=\"#%E6%A0%B7%E5%BC%8F%E5%B1%9E%E6%80%A7-style\">样式属性 style</a> 中的代码，下面代码在 <code class=\"language-text\">defaultNode</code> 中增加了 <code class=\"language-text\">logoIcon</code> 和 <code class=\"language-text\">stateIcon</code> 配置项进行左右图标的配置，使之达到如下图效果，左侧图标不显示，右侧图标更换图片。<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570873145288-207d055e-7d72-46f3-a1e8-471f39299dae.png#align=left&display=inline&height=84&name=image.png&originHeight=168&originWidth=360&search=&size=28301&status=done&width=180\" alt=\"image.png\"></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 <span class=\"token comment\">// ... data 内容</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</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 <span class=\"token comment\">// ... 图的其他属性</span>\n defaultNode<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// ... 节点其他属性</span>\n logoIcon<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n show<span class=\"token punctuation\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n stateIcon<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n show<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n img<span class=\"token punctuation\">:</span>\n <span class=\"token string\">'https://gw.alipayobjects.com/zos/basement_prod/c781088a-c635-452a-940c-0173663456d4.svg'</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<span class=\"token comment\">// ...</span>\n</code></pre></div>"}