@antv/g6
Version:
graph visualization frame work
1 lines • 35 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-86d7b57dfaf82e04bd1b1d1a9acd66be-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<p>G6 除了提供丰富的 <a href=\"https://www.yuque.com/antv/g6/internal-edge\" target=\"_self\" rel=\"nofollow\">自定义边</a> 外，还提供了自定义边的机制，方便用户开发更加定制化的边，包括含有复杂图形的边、复杂交互的边、带有动画的边等。</p>\n<p>在本章中我们会通过四个案例，从简单到复杂讲解边的自定义：<br />1. 从无到有的定义边；<br />2. 扩展现有边：<br />3. 边的交互样式；<br />4. 自定义带箭头的边。</p>\n<h2 id=\"1-从无到有定义边\"><a href=\"#1-%E4%BB%8E%E6%97%A0%E5%88%B0%E6%9C%89%E5%AE%9A%E4%B9%89%E8%BE%B9\" 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. 从无到有定义边</h2>\n<p>我们来实现垂直的折线：<br /></p>\n<img src='https://cdn.nlark.com/yuque/0/2019/png/89796/1548413029414-51b39bd3-c5f4-42ab-90f2-1183c069b34f.png#align=left&display=inline&height=281&name=image.png&originHeight=281&originWidth=206&search=&size=5679&status=done&width=206' alt='img' width='150'/>\n<img src='https://cdn.nlark.com/yuque/0/2019/png/89796/1548412991278-5ddb50ea-3f1d-4269-b8d9-19ac84106ff6.png#align=left&display=inline&height=280&name=image.png&originHeight=280&originWidth=187&search=&size=5072&status=done&width=187' alt='img' width='150'/>\n<img src='https://cdn.nlark.com/yuque/0/2019/png/89796/1548413062802-40be1962-e421-4295-9985-6c9709656462.png#align=left&display=inline&height=264&name=image.png&originHeight=264&originWidth=187&search=&size=5117&status=done&width=187' alt='img' width='150'/>\n<blockquote>\n<p>（左）直线边。（中）默认的折线边。（右）调整了节点的控制点后的折线边。</p>\n</blockquote>\n<h3 id=\"自定义边\"><a href=\"#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BE%B9\" 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<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerEdge</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hvh'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">draw</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg<span class=\"token punctuation\">,</span> group</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> startPoint <span class=\"token operator\">=</span> cfg<span class=\"token punctuation\">.</span>startPoint<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> endPoint <span class=\"token operator\">=</span> cfg<span class=\"token punctuation\">.</span>endPoint<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> shape <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'path'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'#333'</span><span class=\"token punctuation\">,</span>\n path<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">[</span><span class=\"token string\">'M'</span><span class=\"token punctuation\">,</span> startPoint<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> startPoint<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token string\">'L'</span><span class=\"token punctuation\">,</span> endPoint<span class=\"token punctuation\">.</span>x <span class=\"token operator\">/</span> <span class=\"token number\">3</span> <span class=\"token operator\">+</span> <span class=\"token punctuation\">(</span><span class=\"token number\">2</span> <span class=\"token operator\">/</span> <span class=\"token number\">3</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> startPoint<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> startPoint<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 三分之一处</span>\n <span class=\"token punctuation\">[</span><span class=\"token string\">'L'</span><span class=\"token punctuation\">,</span> endPoint<span class=\"token punctuation\">.</span>x <span class=\"token operator\">/</span> <span class=\"token number\">3</span> <span class=\"token operator\">+</span> <span class=\"token punctuation\">(</span><span class=\"token number\">2</span> <span class=\"token operator\">/</span> <span class=\"token number\">3</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> startPoint<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> endPoint<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 三分之二处</span>\n <span class=\"token punctuation\">[</span><span class=\"token string\">'L'</span><span class=\"token punctuation\">,</span> endPoint<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> endPoint<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">return</span> shape<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<ul>\n<li>默认的 <code class=\"language-text\">startPoint</code>， <code class=\"language-text\">endPoint</code> 是两个端点中点的连接线分别同圆的交点；</li>\n<li>修改节点的锚点可以修改 <code class=\"language-text\">startPoint</code> 和 <code class=\"language-text\">endPoint</code> 的位置。</li>\n</ul>\n<h3 id=\"示例数据\"><a href=\"#%E7%A4%BA%E4%BE%8B%E6%95%B0%E6%8D%AE\" 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>通过以下的数据，使用自定义的 hvh 边，就可以实现上图最右边的效果。</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\">'node1'</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\">200</span><span class=\"token punctuation\">,</span>\n anchorPoints<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0.5</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0.5</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 punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</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\">100</span><span class=\"token punctuation\">,</span>\n anchorPoints<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0.5</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0.5</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 punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node3'</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\">300</span><span class=\"token punctuation\">,</span>\n anchorPoints<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0.5</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0.5</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 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 id<span class=\"token punctuation\">:</span> <span class=\"token string\">'edge1'</span><span class=\"token punctuation\">,</span>\n target<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span><span class=\"token punctuation\">,</span>\n source<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\">'hvh'</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\">'edge2'</span><span class=\"token punctuation\">,</span>\n target<span class=\"token punctuation\">:</span> <span class=\"token string\">'node3'</span><span class=\"token punctuation\">,</span>\n source<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\">'hvh'</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</code></pre></div>\n<br />\n<h2 id=\"2-扩展现有边\"><a href=\"#2-%E6%89%A9%E5%B1%95%E7%8E%B0%E6%9C%89%E8%BE%B9\" 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. 扩展现有边</h2>\n<p>通过 <code class=\"language-text\">afterDraw</code> 接口给现有的曲线增加动画。</p>\n<img src='https://cdn.nlark.com/yuque/0/2019/gif/89796/1548411369501-cdf8f944-79db-43eb-b266-de6ad9f4b6a8.gif#align=left&display=inline&height=251&name=line-grow.gif&originHeight=251&originWidth=184&search=&size=27589&status=done&width=184' alt='img' width='150'/>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerEdge</span><span class=\"token punctuation\">(</span>\n <span class=\"token string\">'line-growth'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token function\">afterDraw</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg<span class=\"token punctuation\">,</span> group</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> shape <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'children'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> length <span class=\"token operator\">=</span> shape<span class=\"token punctuation\">.</span><span class=\"token function\">getTotalLength</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n shape<span class=\"token punctuation\">.</span><span class=\"token function\">animate</span><span class=\"token punctuation\">(</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token function\">onFrame</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">ratio</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> startLen <span class=\"token operator\">=</span> ratio <span class=\"token operator\">*</span> length<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> cfg <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n lineDash<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>startLen<span class=\"token punctuation\">,</span> length <span class=\"token operator\">-</span> startLen<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\">return</span> cfg<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n repeat<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">2000</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 string\">'cubic'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<br />\n<h2 id=\"3-边的交互样式\"><a href=\"#3-%E8%BE%B9%E7%9A%84%E4%BA%A4%E4%BA%92%E6%A0%B7%E5%BC%8F\" aria-label=\"3 边的交互样式 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>3. 边的交互样式</h2>\n<p>以点击选中、鼠标 hover 到边为示例，实现如下需求：</p>\n<ul>\n<li>点击边时边变粗，再点击变成细；</li>\n<li>鼠标移动上去变成红色，离开变成 <code class=\"language-text\">'#333'</code> 。</li>\n</ul>\n<p>效果如下图所示。<br /></p>\n<img src='https://cdn.nlark.com/yuque/0/2019/gif/89796/1548411103714-a97cdf5a-539c-40b1-8772-4f72b1f4fea3.gif#align=left&display=inline&height=171&name=active-select.gif&originHeight=171&originWidth=412&search=&size=54407&status=done&width=412' alt='img' width='350'/>\n<br />提示：边如果过细点击时很难击中，可以设置 `**lineAppendWidth**` 来提升击中范围。\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 基于 line 扩展出新的图形</span>\n<span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerEdge</span><span class=\"token punctuation\">(</span>\n <span class=\"token string\">'custom-edge'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 设置状态</span>\n <span class=\"token function\">setState</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">name<span class=\"token punctuation\">,</span> value<span class=\"token punctuation\">,</span> item</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> group <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span><span class=\"token function\">getContainer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> shape <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'children'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 顺序根据 draw 时确定</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>name <span class=\"token operator\">===</span> <span class=\"token string\">'active'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>value<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n shape<span class=\"token punctuation\">.</span><span class=\"token function\">attr</span><span class=\"token punctuation\">(</span><span class=\"token string\">'stroke'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'red'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n shape<span class=\"token punctuation\">.</span><span class=\"token function\">attr</span><span class=\"token punctuation\">(</span><span class=\"token string\">'stroke'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'#333'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>name <span class=\"token operator\">===</span> <span class=\"token string\">'selected'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>value<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n shape<span class=\"token punctuation\">.</span><span class=\"token function\">attr</span><span class=\"token punctuation\">(</span><span class=\"token string\">'lineWidth'</span><span class=\"token punctuation\">,</span> <span class=\"token number\">3</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n shape<span class=\"token punctuation\">.</span><span class=\"token function\">attr</span><span class=\"token punctuation\">(</span><span class=\"token string\">'lineWidth'</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">)</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>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'line'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 点击时选中，再点击时取消</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'edge:click'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> edge <span class=\"token operator\">=</span> ev<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>edge<span class=\"token punctuation\">,</span> <span class=\"token string\">'selected'</span><span class=\"token punctuation\">,</span> <span class=\"token operator\">!</span>edge<span class=\"token punctuation\">.</span><span class=\"token function\">hasState</span><span class=\"token punctuation\">(</span><span class=\"token string\">'selected'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 切换选中</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\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'edge:mouseenter'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> edge <span class=\"token operator\">=</span> ev<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>edge<span class=\"token punctuation\">,</span> <span class=\"token string\">'active'</span><span class=\"token punctuation\">,</span> <span class=\"token boolean\">true</span><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\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'edge:mouseleave'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> edge <span class=\"token operator\">=</span> ev<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>edge<span class=\"token punctuation\">,</span> <span class=\"token string\">'active'</span><span class=\"token punctuation\">,</span> <span class=\"token boolean\">false</span><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<br />\n<h2 id=\"4-自定义带箭头的边\"><a href=\"#4-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B8%A6%E7%AE%AD%E5%A4%B4%E7%9A%84%E8%BE%B9\" aria-label=\"4 自定义带箭头的边 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>4. 自定义带箭头的边</h2>\n<p>很多时候，G6 默认提供的箭头并不能满足业务上的需求，这个时候，就需要我们自定义箭头。当然了，G6 也支持箭头样式的自定义。<br /></p>\n<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1571143168729-72137df2-8d1e-4da6-ba53-86e9726a7af8.png#align=left&display=inline&height=166&name=image.png&originHeight=332&originWidth=632&search=&size=79105&status=done&width=316' alt='img' width='250'/>\n<blockquote>\n<p>（左）G6 内置箭头。（右）自定义边带有自定义箭头。</p>\n</blockquote>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerEdge</span><span class=\"token punctuation\">(</span><span class=\"token string\">'line-arrow'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">draw</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg<span class=\"token punctuation\">,</span> group</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> <span class=\"token punctuation\">{</span> startPoint<span class=\"token punctuation\">,</span> endPoint <span class=\"token punctuation\">}</span> <span class=\"token operator\">=</span> cfg<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> keyShape <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'path'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n path<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">[</span><span class=\"token string\">'M'</span><span class=\"token punctuation\">,</span> startPoint<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> startPoint<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token string\">'L'</span><span class=\"token punctuation\">,</span> endPoint<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> endPoint<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'steelblue'</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 startArrow<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n path<span class=\"token punctuation\">:</span> <span class=\"token string\">'M 10,0 L -10,-10 L -10,10 Z'</span><span class=\"token punctuation\">,</span>\n d<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n endArrow<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n path<span class=\"token punctuation\">:</span> <span class=\"token string\">'M 10,0 L -10,-10 L -10,10 Z'</span><span class=\"token punctuation\">,</span>\n d<span class=\"token punctuation\">:</span> <span class=\"token number\">10</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 keyword\">return</span> keyShape<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>"}