@antv/g6
Version:
graph visualization frame work
1 lines • 25.8 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-6f70acf3939351b3e76f2960d7d389f8-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<p>当数据中没有节点位置信息，或者数据中的位置信息不满足需求时，需要借助一些布局算法对图进行布局。G6 提供了 7 种一般图的布局和 4 种树图的布局：<br /><strong>一般图：</strong></p>\n<ul>\n<li>Random Layout：随机布局；</li>\n<li>\n<p><strong>Force Layout：经典力导向布局：</strong></p>\n<blockquote>\n<p>力导向布局：一个布局网络中，粒子与粒子之间具有引力和斥力，从初始的随机无序的布局不断演变，逐渐趋于平衡稳定的布局方式称之为力导向布局。适用于描述事物间关系，比如人物关系、计算机网络关系等。</p>\n</blockquote>\n</li>\n<li>Circular Layout：环形布局；</li>\n<li>Radial Layout：辐射状布局；</li>\n<li>MDS Layout：高维数据降维算法布局；</li>\n<li>Fruchterman Layout：Fruchterman 布局，一种力导布局；</li>\n<li>Dagre Layout：层次布局。</li>\n</ul>\n<p><strong>树图布局：</strong></p>\n<ul>\n<li>Dendrogram Layout：树状布局（叶子节点布局对齐到同一层）；</li>\n<li>CompactBox Layout：紧凑树布局；</li>\n<li>Mindmap Layout：脑图布局；</li>\n<li>Intended Layout：缩进布局。</li>\n</ul>\n<p>各种布局方法的具体介绍及其配置参见 <a href=\"https://www.yuque.com/antv/g6/agbmu2\" target=\"_self\" rel=\"nofollow\">Layout API</a>。本教程中，我们使用的是力导向布局 (Force Layout)。<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1569834329341-f0c218c5-b9b7-4972-8426-2c0c750d2a00.png#align=left&display=inline&height=276&name=image.png&originHeight=720&originWidth=716&search=&size=288617&status=done&width=274\" alt=\"image.png\"></p>\n<h2 id=\"取消自动适配画布\"><a href=\"#%E5%8F%96%E6%B6%88%E8%87%AA%E5%8A%A8%E9%80%82%E9%85%8D%E7%94%BB%E5%B8%83\" aria-label=\"取消自动适配画布 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>取消自动适配画布</h2>\n<p>我们在之前的教程里面，为了能够将超出画布的图适配到视野中，在实例化图时使用了 <code class=\"language-text\">fitView</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 <span class=\"token comment\">// ...</span>\n <span class=\"token comment\">// fitView: true,</span>\n <span class=\"token comment\">// fitViewPadding: [ 20, 40, 50, 20 ]</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=\"#%E9%BB%98%E8%AE%A4%E5%B8%83%E5%B1%80\" 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<ul>\n<li>若数据中节点有位置信息（<code class=\"language-text\">x</code> 和 <code class=\"language-text\">y</code>），则按照数据的位置信息进行绘制；</li>\n<li>若数据中节点没有位置信息，则默认使用 Random Layout 进行布局。</li>\n</ul>\n<h2 id=\"配置布局\"><a href=\"#%E9%85%8D%E7%BD%AE%E5%B8%83%E5%B1%80\" 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>G6 使用布局的方式非常简单，在图实例化的时候，加上 layout 配置即可。下面代码在实例化图时设置了布局方法为 <code class=\"language-text\">type: 'force'</code>，即经典力导向图布局。并设置了参数 <code class=\"language-text\">preventOverlap: true</code> ，表示希望节点不重叠。力导向布局的更多配置项参见：<a href=\"https://www.yuque.com/antv/g6/agbmu2\" target=\"_self\" rel=\"nofollow\">Layout API</a>。</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 <span class=\"token operator\">...</span> <span class=\"token comment\">// 其他配置项</span>\n layout<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// Object，可选，布局的方法及其配置项，默认为 random 布局。</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'force'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 指定为力导向布局</span>\n preventOverlap<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 防止节点重叠</span>\n <span class=\"token comment\">// nodeSize: 30 // 节点大小，用于算法中防止节点重叠时的碰撞检测。由于已经在上一节的元素配置中设置了每个节点的 size 属性，则不需要在此设置 nodeSize。</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p>结果如下：<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571054535576-5ba50c13-a953-4c49-ba66-8e117deb00e7.png#align=left&display=inline&height=234&name=image.png&originHeight=234&originWidth=304&search=&size=31999&status=done&width=304\" alt=\"image.png\"></p>\n<p>如图所示，节点按照力导向布局自动平衡。但是图中的节点过于拥挤，边上的文字信息被挤占，无法看清。我们希望布局计算边的距离可以更长一些。G6 的力导向布局提供了 <code class=\"language-text\">linkDistance</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 <span class=\"token comment\">// ...</span>\n layout<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'force'</span><span class=\"token punctuation\">,</span>\n preventOverlap<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n linkDistance<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 指定边距离为100</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<p>结果如下：<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571054559628-2a7abff9-1921-41d8-b32f-2704f43db1a0.png#align=left&display=inline&height=335&name=image.png&originHeight=335&originWidth=389&search=&size=46496&status=done&width=389\" alt=\"image.png\"></p>\n<blockquote>\n<p>不同布局之间、相同布局不同参数允许动态切换和过渡，具体参见：<a href=\"../middle/layout\">布局切换</a>。</p>\n</blockquote>\n<p> 提示 <br />布局将在调用 <code class=\"language-text\">graph.render()</code> 时执行计算。</p>\n<h2 id=\"完整代码\"><a href=\"#%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81\" 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<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token doctype\"><!DOCTYPE html></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>Tutorial Demo<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>mountNode<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\">\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 size<span class=\"token punctuation\">:</span> <span class=\"token number\">30</span><span class=\"token punctuation\">,</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\">'#fff'</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n defaultEdge<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</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>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n layout<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'force'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 设置布局算法为 force</span>\n linkDistance<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 设置边长为 100</span>\n preventOverlap<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</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 <span class=\"token keyword\">const</span> <span class=\"token function-variable function\">main</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">async</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> response <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span>\n <span class=\"token string\">'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'</span>\n <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> remoteData <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> response<span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n \n <span class=\"token keyword\">const</span> nodes <span class=\"token operator\">=</span> remoteData<span class=\"token punctuation\">.</span>nodes<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> edges <span class=\"token operator\">=</span> remoteData<span class=\"token punctuation\">.</span>edges<span class=\"token punctuation\">;</span>\n nodes<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">node</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span>node<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n node<span class=\"token punctuation\">.</span>style <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n node<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>lineWidth <span class=\"token operator\">=</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n node<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>stroke <span class=\"token operator\">=</span> <span class=\"token string\">'#666'</span><span class=\"token punctuation\">;</span>\n node<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>fill <span class=\"token operator\">=</span> <span class=\"token string\">'steelblue'</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">switch</span> <span class=\"token punctuation\">(</span>node<span class=\"token punctuation\">.</span>class<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">case</span> <span class=\"token string\">'c0'</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n node<span class=\"token punctuation\">.</span>shape <span class=\"token operator\">=</span> <span class=\"token string\">'circle'</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">break</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token keyword\">case</span> <span class=\"token string\">'c1'</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n node<span class=\"token punctuation\">.</span>shape <span class=\"token operator\">=</span> <span class=\"token string\">'rect'</span><span class=\"token punctuation\">;</span>\n node<span class=\"token punctuation\">.</span>size <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span> <span class=\"token number\">35</span><span class=\"token punctuation\">,</span> <span class=\"token number\">20</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">break</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token keyword\">case</span> <span class=\"token string\">'c2'</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n node<span class=\"token punctuation\">.</span>shape <span class=\"token operator\">=</span> <span class=\"token string\">'ellipse'</span><span class=\"token punctuation\">;</span>\n node<span class=\"token punctuation\">.</span>size <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span> <span class=\"token number\">35</span><span class=\"token punctuation\">,</span> <span class=\"token number\">20</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">break</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n edges<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</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\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span>edge<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n edge<span class=\"token punctuation\">.</span>style <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n edge<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>lineWidth <span class=\"token operator\">=</span> edge<span class=\"token punctuation\">.</span>weight<span class=\"token punctuation\">;</span>\n edge<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>opacity <span class=\"token operator\">=</span> <span class=\"token number\">0.6</span><span class=\"token punctuation\">;</span>\n edge<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>stroke <span class=\"token operator\">=</span> <span class=\"token string\">'grey'</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">data</span><span class=\"token punctuation\">(</span>remoteData<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n graph<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 <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token function\">main</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></code></pre></div>\n<p> <code class=\"language-text\">注意</code> <br />若需更换数据，请替换 <code class=\"language-text\">'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'</code> 为新的数据文件地址。</p>"}