@antv/g6
Version:
graph visualization frame work
1 lines • 46.6 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-146f04984f2d8c60888297d34d2b6798-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<p>图的元素特指图上的<strong>节点</strong><code class=\"language-text\">Node</code>和<strong>边</strong><code class=\"language-text\">Edge</code>。在上一章节中，我们已经将<strong>Tutorial案例</strong>的图绘制了出来，但是各个元素及其 <code class=\"language-text\">label</code> 在视觉上很简陋。本文通过将上一章节中简陋的元素美化成如下效果，介绍元素的属性、配置方法。<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1569834303620-7f78a971-20ae-4cf0-89f6-a1eecf787c63.png#align=left&display=inline&height=364&name=image.png&originHeight=1088&originWidth=1412&search=&size=344037&status=done&width=473\" alt=\"image.png\"></p>\n<blockquote>\n<p>图 1 元素属性配置后的 <strong>Tutorial案例</strong>。</p>\n</blockquote>\n<h2 id=\"基本概念\"><a href=\"#%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5\" 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=\"图的元素\"><a href=\"#%E5%9B%BE%E7%9A%84%E5%85%83%E7%B4%A0\" 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>图的元素特指图上的<strong>节点</strong><code class=\"language-text\">Node</code>和<strong>边</strong><code class=\"language-text\">Edge</code>。G6 内置了一系列 <a href=\"../middle/elements/defaultNode\">内置的节点</a> 和<a href=\"../middle/elements/defaultEdge\">内置的边</a>，供用户自由选择。G6 不同的内置节点或不同的内置边主要区别在于元素的 <a href=\"../middle/keyConcept\">图形Shape</a>，例如，节点可以是圆形、矩形、图片等。如果 G6 内置的元素不能满足需求，用户也可以 <a href=\"../advanced/custom-node\">自定义节点</a> 或 <a href=\"../advanced/custom-edge\">自定义边</a>。</p>\n<h2 id=\"元素的属性\"><a href=\"#%E5%85%83%E7%B4%A0%E7%9A%84%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<ul>\n<li><strong>样式属性 <code class=\"language-text\">style</code></strong>：对应 Canvas 中的各种样式，在元素<a href=\"../middle/states/state\">状态State</a> 发生变化时，可以被改变；</li>\n<li><strong>其他属性</strong>：例如图形（ <code class=\"language-text\">shape</code>）、id（<code class=\"language-text\">id</code> ）一类在元素<a href=\"../middle/states/state\">状态State</a>发生变化时不能被改变的属性。</li>\n</ul>\n<p>例如，G6 设定 hover 或 click 节点，造成节点状态的改变，只能自动改变节点的<strong>样式属性</strong>（如 <code class=\"language-text\">fill</code>、<code class=\"language-text\">stroke</code> 等<strong>）</strong>，<strong>其他属性</strong>（如 <code class=\"language-text\">shape</code> 等）不能被改变。如果需要改变其他属性，要通过 <a href=\"../../api/Graph\">graph.updateItem</a> 手动配置。<strong>样式属性</strong>是一个名为 <code class=\"language-text\">style</code> 的对象， <code class=\"language-text\">style</code> 字段与其他属性并行。</p>\n<h3 id=\"数据结构\"><a href=\"#%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84\" 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 punctuation\">{</span>\n\tid<span class=\"token punctuation\">:</span> <span class=\"token string\">'node0'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 元素的 id</span>\n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'circle'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 元素的图形</span>\n size<span class=\"token punctuation\">:</span> <span class=\"token number\">40</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 元素的大小</span>\n label<span class=\"token punctuation\">:</span> <span class=\"token string\">'node0'</span> <span class=\"token comment\">// 标签文字</span>\n labelCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// 标签配置属性</span>\n positions<span class=\"token punctuation\">:</span> <span class=\"token string\">'center'</span><span class=\"token punctuation\">,</span><span class=\"token comment\">// 标签的属性，标签在元素中的位置</span>\n style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// 包裹标签样式属性的字段 style 与标签其他属性在数据结构上并行</span>\n fontSize<span class=\"token punctuation\">:</span> <span class=\"token number\">12</span> <span class=\"token comment\">// 标签的样式属性，文字字体大小</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token operator\">...</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 其他属性</span>\n style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// 包裹样式属性的字段 style 与其他属性在数据结构上并行</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'#000'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 样式属性，元素的填充色</span>\n stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'#888'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 样式属性，元素的描边色</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<p>边元素的属性数据结构与节点元素相似，只是其他属性中多了 <code class=\"language-text\">source</code> 和 <code class=\"language-text\">target</code> 字段，代表起始和终止节点的 <code class=\"language-text\">id</code>。<br />细化在图 1 中 <strong>Tutorial案例</strong> 的视觉需求，我们需要完成：</p>\n<ul>\n<li>\n<p>视觉效果：</p>\n<ul>\n<li>R1: 节点的描边和填充色，对应节点样式属性：<code class=\"language-text\">fill</code>，<code class=\"language-text\">stroke</code>；</li>\n<li>R2: 节点上标签文本的颜色，对应节点其他属性：<code class=\"language-text\">labelCfg</code>；</li>\n<li>R3: 边的透明度和颜色，对应边样式属性：<code class=\"language-text\">opacity</code>，<code class=\"language-text\">stroke</code>；</li>\n<li>R4: 边上标签文本的方向和颜色，对应边其他属性：<code class=\"language-text\">labelCfg</code>；</li>\n</ul>\n</li>\n<li>\n<p>数据与视觉映射：</p>\n<ul>\n<li>R5: 根据数据中节点的 <code class=\"language-text\">class</code> 属性映射节点的形状，对应节点其他属性：<code class=\"language-text\">shape</code>；</li>\n<li>R6: 根据数据中边的 <code class=\"language-text\">weight</code> 属性映射边的粗细，对应边样式属性：<code class=\"language-text\">lineWidth</code>。</li>\n</ul>\n</li>\n</ul>\n<h2 id=\"配置属性\"><a href=\"#%E9%85%8D%E7%BD%AE%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>在 G6 中，根据不同的场景需求，有 7 种配置元素属性的方式。这里，我们简单介绍其中的两种：</p>\n<ol>\n<li>实例化图时配置元素的全局属性；</li>\n<li>在数据中配置。</li>\n</ol>\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><strong>适用场景：</strong>所有节点统一的属性配置，所有边统一的属性配置。<br /><strong>使用方式：</strong>使用图的两个配置项：</p>\n<ul>\n<li><code class=\"language-text\">defaultNode</code>：节点在默认状态下的<strong>样式属性</strong>（<code class=\"language-text\">style</code>）和<strong>其他属性</strong>；</li>\n<li><code class=\"language-text\">defaultEdge</code>：边在默认状态下的<strong>样式属性</strong>（<code class=\"language-text\">style</code>）和<strong>其他属性</strong>。</li>\n</ul>\n<p> 注意 ：由于是统一的配置，不能根据数据中的属性（如 <code class=\"language-text\">class</code>、<code class=\"language-text\">weight</code>）等值的不同进行个性化设置，因此只能满足 R1、R2、R3、R4 需求。达到如下效果：<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1569834303607-c95a7080-3643-4f54-a5ad-8d68aea3f2e7.png#align=left&display=inline&height=263&name=image.png&originHeight=1108&originWidth=1380&search=&size=321741&status=done&width=328\" alt=\"image.png\"></p>\n<blockquote>\n<p>图 2 全局配置元素属性后的 <strong>Tutorial案例</strong>。</p>\n</blockquote>\n<p><br />通过如下方式在实例化图时 <code class=\"language-text\">defaultNode</code> 和 <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 <span class=\"token comment\">// ... // 图的其他配置</span>\n <span class=\"token comment\">// 节点在默认状态下的样式配置（style）和其他配置</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> <span class=\"token comment\">// 节点大小</span>\n <span class=\"token comment\">// ... // 节点的其他配置</span>\n <span class=\"token comment\">// 节点样式配置</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> <span class=\"token comment\">// 节点填充色</span>\n stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'#666'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 节点描边色</span>\n lineWidth<span class=\"token punctuation\">:</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 节点描边粗细</span>\n <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 <span class=\"token comment\">// 节点上的标签文本样式配置</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><span class=\"token punctuation\">,</span> <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>\n <span class=\"token comment\">// 边在默认状态下的样式配置（style）和其他配置</span>\n defaultEdge<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// ... // 边的其他配置</span>\n <span class=\"token comment\">// 边样式配置</span>\n style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n opacity<span class=\"token punctuation\">:</span> <span class=\"token number\">0.6</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 边透明度</span>\n stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'grey'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 边描边颜色</span>\n <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> <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<h3 id=\"2-在数据中配置\"><a href=\"#2-%E5%9C%A8%E6%95%B0%E6%8D%AE%E4%B8%AD%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><strong>适用场景：</strong>不同节点/边可以有不同的个性化配置。<br />因此，这种配置方式可以满足 R5、R6 需求。<br /><strong>使用方式：</strong>可以直接将配置写入数据文件；也可以在读入数据后，通过遍历的方式写入配置。这里展示读入数据后，通过遍历的方式写入配置。下面代码展示了如何遍历数据进行属性的配置：</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> nodes <span class=\"token operator\">=</span> remoteData<span class=\"token punctuation\">.</span>nodes<span class=\"token punctuation\">;</span>\nnodes<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 <span class=\"token keyword\">switch</span> <span class=\"token punctuation\">(</span>\n node<span class=\"token punctuation\">.</span>class <span class=\"token comment\">// 根据节点数据中的 class 属性配置图形</span>\n <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> <span class=\"token comment\">// class = 'c0' 时节点图形为 circle</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> <span class=\"token comment\">// class = 'c1' 时节点图形为 rect</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> <span class=\"token comment\">// class = 'c1' 时节点大小</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> <span class=\"token comment\">// class = 'c1' 时节点图形为 ellipse</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> <span class=\"token comment\">// class = 'c2' 时节点大小</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\ngraph<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</code></pre></div>\n<p>运行结果如下：<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571053670628-f03b618a-6d61-4b95-97ed-13f8553ddbf7.png#align=left&display=inline&height=295&name=image.png&originHeight=461&originWidth=591&search=&size=45245&status=done&width=378\" alt=\"image.png\"><br /></p>\n<blockquote>\n<p>图 3</p>\n</blockquote>\n<p>可以看到，图中有一些节点被渲染成了矩形，还有一些被渲染成了椭圆形。除了设置 shape 属性之外，我们还覆盖了上文全局配置的节点的 size 属性，在矩形和椭圆的情况下，size 是一个数组；而在默认圆形的情况下，G6 仍然会去读全局配置的 size 属性为数字 30。也就是说，动态配置属性让我们既可以根据数据的不同配置不同的属性值，也可以有能力覆盖全局静态的属性值。</p>\n<p>进一步地，我们尝试根据数据的比重不同，配置不一样边的粗细：</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// const nodes = ...</span>\n\n<span class=\"token comment\">// 遍历边数据</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>\nedges<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> <span class=\"token comment\">// 边的粗细映射边数据中的 weight 属性数值</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\ngraph<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</code></pre></div>\n<p>结果如下：<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571053730991-c5410026-ca56-422c-ad20-3725825fc3e5.png#align=left&display=inline&height=465&name=image.png&originHeight=465&originWidth=618&search=&size=51999&status=done&width=618\" alt=\"image.png\"><br />如图所示，边的粗细已经按照数据的比重成功渲染了出来，但是边原有的样式（透明度、颜色）却丢失了。这是因为我们提到过动态配置属性会覆盖全局配置属性，这里配置了 <code class=\"language-text\">style.lineWidth</code>，导致覆盖了全局的 <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 <span class=\"token comment\">// ...</span>\n defaultEdge<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 去掉全局配置的 style</span>\n labelCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 边上的标签文本配置</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 <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\n<span class=\"token comment\">// 遍历点数据</span>\n<span class=\"token comment\">// const nodes = ...</span>\n<span class=\"token comment\">// nodes.forEach ...</span>\n\n<span class=\"token comment\">// 遍历边数据</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>\nedges<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> <span class=\"token comment\">// 边的粗细映射边数据中的 weight 属性数值</span>\n <span class=\"token comment\">// 移到此处</span>\n opt<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 opt<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\ngraph<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>\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 />再次渲染，结果如下：<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571053730983-8ea78c4e-2155-486d-b704-b99eed57a015.png#align=left&display=inline&height=465&name=image.png&originHeight=465&originWidth=614&search=&size=48748&status=done&width=614\" alt=\"image.png\"><br />\n<br />如图所示，边的透明度和颜色均渲染正确。<br /></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 fitView<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n fitViewPadding<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span> <span class=\"token number\">20</span><span class=\"token punctuation\">,</span> <span class=\"token number\">40</span><span class=\"token punctuation\">,</span> <span class=\"token number\">50</span><span class=\"token punctuation\">,</span> <span class=\"token number\">20</span> <span class=\"token punctuation\">]</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 <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\t\t<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 <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>"}