@antv/g6
Version:
graph visualization frame work
1 lines • 12.3 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-42246da0803788de5c73514ec4ae3b6c-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<p>Shape API都是在自定义节点（registerNode）或自定义边（registerEdge）的过程中需要部分实现或复写的方法。</p>\n<p><strong>友情提示：</strong>以下属性和API方法，全部用于自定义节点和边时候使用，即作为<code class=\"language-text\">G6.registerNode</code> / <code class=\"language-text\">G6.registerEdge</code>的第二个参数中的方法使用。</p>\n<h2 id=\"用法\"><a href=\"#%E7%94%A8%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<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">import G6 from '@antv/g6'\nG6.registerNode('nodeName', {\n draw(cfg, group) {\n // 定义的其他方法，都可以在draw里面调用， 如 drawShape、drawLabel 等。\n this.drawShape()\n const labelStyle = this.getLabelStyle(cfg)\n // ...\n },\n drawShape(cfg, group) {\n // \n },\n getLabelStyle(cfg) {\n // 根据业务返回 label 的样式\n return {}\n },\n update(cfg, item) {\n // 更新绘制的元素\n\n }\n}, 'circle')</code></pre></div>\n<h2 id=\"属性\"><a href=\"#%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<h3 id=\"itemtype\"><a href=\"#itemtype\" aria-label=\"itemtype 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>itemType</h3>\n<p>元素类型，目前支持node、edge，后续可能会支持group。</p>\n<h3 id=\"labelposition\"><a href=\"#labelposition\" aria-label=\"labelposition 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>labelPosition</h3>\n<p>文本相对于图形的位置，默认值为center。</p>\n<ul>\n<li>当itemType为node时，labelPosition值包括：top、bottom、left、right和center；</li>\n<li>当itemType为edge时，labelPos值包括start、end和center。</li>\n</ul>\n<h3 id=\"labelautorotate\"><a href=\"#labelautorotate\" aria-label=\"labelautorotate 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>labelAutoRotate</h3>\n<blockquote>\n<p>只有在 registerEdge 时有用。</p>\n</blockquote>\n<p>文本是否跟着线自动旋转，默认值为false。</p>\n<p><strong>提示：edge特有。</strong></p>\n<h2 id=\"绘制\"><a href=\"#%E7%BB%98%E5%88%B6\" aria-label=\"绘制 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>绘制</h2>\n<p>绘制部分四个API的参数完全相同，参数说明部分参考draw()方法。</p>\n<h3 id=\"drawcfg-group\"><a href=\"#drawcfg-group\" aria-label=\"drawcfg group 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>draw(cfg, group)</h3>\n<p>绘制节点和边，包括节点和边上的文本，返回图形的keyShape。</p>\n<p><strong>参数</strong></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>cfg</td>\n<td>object</td>\n<td>true</td>\n<td>节点或边的配置项</td>\n</tr>\n<tr>\n<td>group</td>\n<td>G.Group</td>\n<td>true</td>\n<td>节点或边的容器</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"afterdrawcfg-group\"><a href=\"#afterdrawcfg-group\" aria-label=\"afterdrawcfg group 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>afterDraw(cfg, group)</h3>\n<p>绘制完成以后的操作，用户可继承现有的节点或边，在afterDraw()方法中扩展图形或添加动画。</p>\n<h2 id=\"更新\"><a href=\"#%E6%9B%B4%E6%96%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<h3 id=\"updatecfg-item\"><a href=\"#updatecfg-item\" aria-label=\"updatecfg item 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>update(cfg, item)</h3>\n<p>更新节点或边，包括节点或边上的文本。</p>\n<p><strong>参数</strong></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>cfg</td>\n<td>object</td>\n<td>true</td>\n<td>节点或边的配置项</td>\n</tr>\n<tr>\n<td>item</td>\n<td>G6.Item</td>\n<td>true</td>\n<td>节点或边的实例</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"afterupdatecfg-item\"><a href=\"#afterupdatecfg-item\" aria-label=\"afterupdatecfg item 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>afterUpdate(cfg, item)</h3>\n<p>更新完以后的操作，如扩展图形或添加动画。</p>\n<h3 id=\"shouldupdatetype\"><a href=\"#shouldupdatetype\" aria-label=\"shouldupdatetype 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>shouldUpdate(type)</h3>\n<p>是否允许更新。</p>\n<p><strong>参数</strong></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>type</td>\n<td>string</td>\n<td>true</td>\n<td>元素类型，node或edge</td>\n</tr>\n</tbody>\n</table>\n<p><strong>返回值</strong></p>\n<ul>\n<li>返回值类型：boolean；</li>\n<li>返回true，则允许更新，否则不允许更新。</li>\n</ul>\n<h3 id=\"setstatename-value-item\"><a href=\"#setstatename-value-item\" aria-label=\"setstatename value item 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>setState(name, value, item)</h3>\n<p>设置元素的状态，主要是交互状态，业务状态请在draw()方法中实现。单图形的节点仅考虑selected、active状态，有其他状态需求的用户可以复写该方法。</p>\n<p><strong>参数</strong></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>name</td>\n<td>string</td>\n<td>true</td>\n<td>状态名称</td>\n</tr>\n<tr>\n<td>value</td>\n<td>boolean</td>\n<td>true</td>\n<td>状态是否可用，为true时可用，否则不可用</td>\n</tr>\n<tr>\n<td>item</td>\n<td>G6.Item</td>\n<td>true</td>\n<td>节点或边的实例</td>\n</tr>\n</tbody>\n</table>"}