@antv/g6
Version:
graph visualization frame work
1 lines • 22.7 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-c4b92ffa7851954eb9be7fd0075dd872-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<p>G6 内置了圆弧 arc 边，其默认样式如下。<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570875218589-c7330833-07dd-4fb3-8a67-3642ef10d725.png#align=left&display=inline&height=109&name=image.png&originHeight=218&originWidth=234&search=&size=13909&status=done&width=117\" alt=\"image.png\"></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=\"../defaultEdge\">内置边</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\">defaultEdge</code> 指定 <code class=\"language-text\">shape</code> 为 <code class=\"language-text\">'arc'</code>，即可使用 arc 边。</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\">'arc'</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>\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\">'arc'</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<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>arc 边支持以下的配置项，其中 <code class=\"language-text\">curveOffset</code> 属性是 <code class=\"language-text\">arc</code> 特有的属性，它控制了圆弧的大小以及弯曲的方向。</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">color<span class=\"token punctuation\">:</span> <span class=\"token string\">'#87e8de'</span><span class=\"token punctuation\">,</span>\ncurveOffset<span class=\"token punctuation\">:</span> <span class=\"token number\">20</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 圆弧顶端距离两线中心位置的距离</span>\nstyle<span class=\"token punctuation\">:</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 stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'#87e8de'</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\nlabel<span class=\"token punctuation\">:</span> <span class=\"token string\">'边的标签文字'</span><span class=\"token punctuation\">,</span>\nlabelCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n refX<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 文本在 x 方向偏移量</span>\n refY<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 文本在 y 方向偏移量</span>\n style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'#595959'</span>\n <span class=\"token punctuation\">}</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>color</td>\n<td>边的颜色</td>\n<td>String</td>\n<td>优先级低于 style 中的 stroke</td>\n</tr>\n<tr>\n<td><strong>curveOffset</strong></td>\n<td><strong>圆弧顶端距离两线中心位置的距离</strong></td>\n<td><strong>Number</strong></td>\n<td><strong>数值绝对值大小控制圆弧的大小，正负控制圆弧弯曲的方向，默认为 20。arc 边特有</strong></td>\n</tr>\n<tr>\n<td>style</td>\n<td>边的样式</td>\n<td>Object</td>\n<td>Canvas支持的属性</td>\n</tr>\n<tr>\n<td>label</td>\n<td>标签文本文字</td>\n<td>String</td>\n<td></td>\n</tr>\n<tr>\n<td>labelCfg</td>\n<td>文件配置项</td>\n<td>Object</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"特殊属性：弧度-curveoffset\"><a href=\"#%E7%89%B9%E6%AE%8A%E5%B1%9E%E6%80%A7%EF%BC%9A%E5%BC%A7%E5%BA%A6-curveoffset\" aria-label=\"特殊属性：弧度 curveoffset 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>特殊属性：弧度 curveOffset</h3>\n<p><code class=\"language-text\">curveOffset</code> 属性是 <code class=\"language-text\">arc</code> 特有的属性，它控制了圆弧的大小以及弯曲的方向。下面代码演示在实例化图时全局配置方法中配置 <code class=\"language-text\">curveOffset</code>。<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570875327516-469c8e29-8534-4e13-bb39-fcd57a0e43f5.png#align=left&display=inline&height=116&name=image.png&originHeight=232&originWidth=252&search=&size=15622&status=done&width=126\" 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 id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node0'</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span>\n size<span class=\"token punctuation\">:</span> <span class=\"token number\">20</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">200</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">200</span><span class=\"token punctuation\">,</span>\n size<span class=\"token punctuation\">:</span> <span class=\"token number\">20</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 edges<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <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><span class=\"token punctuation\">,</span>\n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'arc'</span><span class=\"token punctuation\">,</span>\n label<span class=\"token punctuation\">:</span> <span class=\"token string\">'arc'</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 linkCenter<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n defaultEdge<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// shape: 'arc', // 在数据中已经指定 shape，这里无需再次指定</span>\n curveOffset<span class=\"token punctuation\">:</span> <span class=\"token operator\">-</span><span class=\"token number\">80</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<p>注意：<br />上面代码使用了 graph 的配置项 <code class=\"language-text\">linkCenter: true</code> 以设置 arc 边连入节点的中心，保证美观性。</p>\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 类型。配置项与边的通用样式属性相同，见 <a href=\"https://www.yuque.com/antv/g6/internal-edge\" target=\"_self\" rel=\"nofollow\">内置边</a>。基于上面 <a href=\"#C9lmR\">弧度 curveOffset</a> 中的代码，下面代码在 <code class=\"language-text\">defaultNode</code> 中增加了 <code class=\"language-text\">style</code> 配置项进行边的样式的配置，使之达到如下图效果。<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570875549188-e8d10d15-a90b-4f98-a6a9-3162b9893728.png#align=left&display=inline&height=116&name=image.png&originHeight=232&originWidth=252&search=&size=21575&status=done&width=126\" 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 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\">'#088'</span><span class=\"token punctuation\">,</span>\n lineWidth<span class=\"token punctuation\">:</span> <span class=\"token number\">3</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=\"标签文本配置-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 类型。其配置与边的通用文本配置相同，见 <a href=\"https://www.yuque.com/antv/g6/internal-edge\" target=\"_self\" rel=\"nofollow\">内置边</a>。基于上面 <a href=\"https://www.yuque.com/antv/g6/ozfxuv#C9lmR\" target=\"_self\" rel=\"nofollow\">弧度 curveOffset</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/1570875786431-339c28e0-f89a-45f7-9a84-bbb263ea399b.png#align=left&display=inline&height=118&name=image.png&originHeight=236&originWidth=262&search=&size=22850&status=done&width=131\" 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 defaultEdge<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 autoRotate<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n refY<span class=\"token punctuation\">:</span> <span class=\"token operator\">-</span><span class=\"token number\">30</span><span class=\"token punctuation\">,</span>\n refX<span class=\"token punctuation\">:</span> <span class=\"token number\">30</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>"}