@antv/g6
Version:
graph visualization frame work
1 lines • 31.9 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-0f7ba82bda743ea42b66a892d1cb67e3-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<p>为辅助用户在图上探索，G6 提供了一些辅助工具，其中一部分是插件工具，另一部分是交互工具。</p>\n<p>本文将为 Tutorial案例 添加缩略图插件、网格插件、节点提示框、边提示框。</p>\n<h2 id=\"插件\"><a href=\"#%E6%8F%92%E4%BB%B6\" aria-label=\"插件 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>插件</h2>\n<p>使用插件时，有三个步骤：<br /> Step 1: 引入插件；<br /> Step 2: 实例化插件；<br /> Step 3: 在实例化图时将插件的实例配置到图上。</p>\n<h3 id=\"minimap\"><a href=\"#minimap\" aria-label=\"minimap 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>Minimap</h3>\n<p>缩略图 (Minimap) 是一种常见的用于快速预览和探索图的工具，可作为导航辅助用户探索大规模图。<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/gif/156681/1569834439034-871d6eb6-6b9f-4522-9e68-fbde5238cdff.gif#align=left&display=inline&height=380&name=tree-minimap.gif&originHeight=703&originWidth=955&search=&size=2054425&status=done&width=516\" alt=\"tree-minimap.gif\"></p>\n<p>现在，我们为 <strong>Tutorial案例</strong> 配置一个 Minimap：</p>\n<h4 id=\"预期效果\"><a href=\"#%E9%A2%84%E6%9C%9F%E6%95%88%E6%9E%9C\" 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>预期效果</h4>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/gif/156681/1569834439046-9874baa4-84f2-4e03-97ed-126de950f182.gif#align=left&display=inline&height=255&name=tutorial-demo-minimap.gif&originHeight=657&originWidth=844&search=&size=1133472&status=done&width=328\" alt=\"tutorial-demo-minimap.gif\"></p>\n<h4 id=\"使用方法\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95\" aria-label=\"使用方法 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>使用方法</h4>\n<p>Minimap 是 G6 的插件之一，G6 的插件是一个个独立的包，需要单独引入：</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><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 comment\"><!-- 引入 G6 --></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.1/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 \n <span class=\"token comment\"><!-- 引入 Minimap --></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.1/build/minimap.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 \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 comment\">// ...</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></code></pre></div>\n<p>使用起来非常简单，实例化 Minimap 对象，并将其配置到图实例的插件列表里即可：</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 实例化 minimap 插件</span>\n<span class=\"token keyword\">const</span> minimap <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Minimap</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n size<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">100</span><span class=\"token punctuation\">,</span> <span class=\"token number\">100</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n className<span class=\"token punctuation\">:</span> <span class=\"token string\">'minimap'</span><span class=\"token punctuation\">,</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'delegate'</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 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 plugins<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>minimap<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 将 minimap 实例配置到图上</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"grid-网格\"><a href=\"#grid-%E7%BD%91%E6%A0%BC\" aria-label=\"grid 网格 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>Grid 网格</h3>\n<p>网格可用于辅助用户在拖拽节点时对齐到网格。</p>\n<h4 id=\"期待效果\"><a href=\"#%E6%9C%9F%E5%BE%85%E6%95%88%E6%9E%9C\" 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>期待效果</h4>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/gif/156681/1569834439034-0ff04880-ad0f-45a7-936a-71b4970e9480.gif#align=left&display=inline&height=213&name=tutorial-demo-grid.gif&originHeight=521&originWidth=691&search=&size=590193&status=done&width=283\" alt=\"tutorial-demo-grid.gif\"></p>\n<h4 id=\"使用方法首先引入插件：\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%E9%A6%96%E5%85%88%E5%BC%95%E5%85%A5%E6%8F%92%E4%BB%B6%EF%BC%9A\" 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>使用方法首先引入插件：</h4>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><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 comment\"><!-- 引入 G6 --></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.1/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 \n <span class=\"token comment\"><!-- 引入 Minimap --></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.1/build/minimap.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 \n <span class=\"token comment\"><!-- 引入 Grid --></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/grid.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 \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 comment\">// ...</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></code></pre></div>\n<p>实例化插件和配置插件到图上：</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// const minimap = ...</span>\n\n<span class=\"token comment\">// 实例化 grid 插件</span>\n<span class=\"token keyword\">const</span> grid <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Grid</span><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 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 plugins<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>minimap<span class=\"token punctuation\">,</span> grid<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 将 grid 实例配置到图上</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=\"#%E4%BA%A4%E4%BA%92%E5%B7%A5%E5%85%B7\" 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>交互工具是指配置到图上交互模式中的工具。使用交互工具时，有两个步骤：<br /> Step 1: 在实例化图时配置 <code class=\"language-text\">modes</code>；<br /> Step 2: 为交互工具定义样式。</p>\n<h3 id=\"tooltip-节点提示框\"><a href=\"#tooltip-%E8%8A%82%E7%82%B9%E6%8F%90%E7%A4%BA%E6%A1%86\" aria-label=\"tooltip 节点提示框 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>tooltip 节点提示框</h3>\n<p>节点提示框可以用在节点的详细信息的展示。当鼠标滑过节点时，显示一个浮层告知节点的详细信息。</p>\n<h4 id=\"预期效果-1\"><a href=\"#%E9%A2%84%E6%9C%9F%E6%95%88%E6%9E%9C-1\" 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>预期效果</h4>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/gif/156681/1569834439070-ac2e4d9d-150f-47d4-8ee7-4f58e19d45cb.gif#align=left&display=inline&height=240&name=tutorial-demo-nodetooltip.gif&originHeight=375&originWidth=416&search=&size=103487&status=done&width=266\" alt=\"tutorial-demo-nodetooltip.gif\"></p>\n<h4 id=\"使用方法-1\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95-1\" 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>使用方法</h4>\n<p>实例化图时配置 <code class=\"language-text\">'tooltip'</code> 到 <code class=\"language-text\">modes</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 modes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">default</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token comment\">// ...</span>\n <span class=\"token punctuation\">{</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'tooltip'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 提示框</span>\n <span class=\"token function\">formatText</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">model</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 提示框文本内容</span>\n <span class=\"token keyword\">const</span> text <span class=\"token operator\">=</span> <span class=\"token string\">'label: '</span> <span class=\"token operator\">+</span> model<span class=\"token punctuation\">.</span>label <span class=\"token operator\">+</span> <span class=\"token string\">'<br/> class: '</span> <span class=\"token operator\">+</span> model<span class=\"token punctuation\">.</span>class<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">return</span> text<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 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>由于 tooltip 实际上是一个悬浮的 <code class=\"language-text\"><div></code> 标签，因此可在 HTML 的 <code class=\"language-text\"><style></code> 标签或 CSS 中设置样式。下面展示在 HTML 中设置样式：</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><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\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>style</span><span class=\"token punctuation\">></span></span><span class=\"token style\"><span class=\"token language-css\">\n <span class=\"token comment\">/* 提示框的样式 */</span>\n <span class=\"token selector\">.g6-tooltip</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border</span><span class=\"token punctuation\">:</span> 1px solid #e2e2e2<span class=\"token punctuation\">;</span>\n <span class=\"token property\">border-radius</span><span class=\"token punctuation\">:</span> 4px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">font-size</span><span class=\"token punctuation\">:</span> 12px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> #545454<span class=\"token punctuation\">;</span>\n <span class=\"token property\">background-color</span><span class=\"token punctuation\">:</span> <span class=\"token function\">rgba</span><span class=\"token punctuation\">(</span>255<span class=\"token punctuation\">,</span> 255<span class=\"token punctuation\">,</span> 255<span class=\"token punctuation\">,</span> 0.9<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> 10px 8px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">box-shadow</span><span class=\"token punctuation\">:</span> <span class=\"token function\">rgb</span><span class=\"token punctuation\">(</span>174<span class=\"token punctuation\">,</span> 174<span class=\"token punctuation\">,</span> 174<span class=\"token punctuation\">)</span> 0px 0px 10px<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>style</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></code></pre></div>\n<h3 id=\"edge-tooltip-边提示框\"><a href=\"#edge-tooltip-%E8%BE%B9%E6%8F%90%E7%A4%BA%E6%A1%86\" aria-label=\"edge tooltip 边提示框 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>edge-tooltip 边提示框</h3>\n<p>节点提示框可以用在节点的详细信息的展示。当鼠标滑过边时，显示一个浮层告知边的详细信息。</p>\n<h4 id=\"预期效果-2\"><a href=\"#%E9%A2%84%E6%9C%9F%E6%95%88%E6%9E%9C-2\" 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>预期效果</h4>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/gif/156681/1569834439041-51850522-4cda-4fc7-b61f-8d84046e14ff.gif#align=left&display=inline&height=267&name=tutorial-demo-edgetooltip.gif&originHeight=375&originWidth=416&search=&size=109080&status=done&width=296\" alt=\"tutorial-demo-edgetooltip.gif\"></p>\n<h4 id=\"使用方法-2\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95-2\" 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>使用方法</h4>\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 modes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">default</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token comment\">// ...</span>\n <span class=\"token punctuation\">{</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'tooltip'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 节点提示框</span>\n <span class=\"token comment\">// ...</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'edge-tooltip'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 边提示框</span>\n <span class=\"token function\">formatText</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">model</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 边提示框文本内容</span>\n <span class=\"token keyword\">const</span> text <span class=\"token operator\">=</span>\n <span class=\"token string\">'source: '</span> <span class=\"token operator\">+</span>\n model<span class=\"token punctuation\">.</span>source <span class=\"token operator\">+</span>\n <span class=\"token string\">'<br/> target: '</span> <span class=\"token operator\">+</span>\n model<span class=\"token punctuation\">.</span>target <span class=\"token operator\">+</span>\n <span class=\"token string\">'<br/> weight: '</span> <span class=\"token operator\">+</span>\n model<span class=\"token punctuation\">.</span>weight<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">return</span> text<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 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>与 tooltip 相同，edge-tooltip 是一个悬浮的 <code class=\"language-text\"><div></code> 标签，可以使用与 tooltip 相同的方法设置其悬浮框的样式。</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>至此，Tutorial-案例 完成，完整代码见：<a href=\"https://codepen.io/Yanyan-Wang/pen/mdbYZvZ\" target=\"_self\" rel=\"nofollow\">Tutorial案例代码</a>。</p>\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>"}