@antv/g6
Version:
graph visualization frame work
1 lines • 50.9 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-ast-0f7ba82bda743ea42b66a892d1cb67e3-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"为辅助用户在图上探索，G6 提供了一些辅助工具，其中一部分是插件工具，另一部分是交互工具。","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":46,"offset":46},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":46,"offset":46},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"本文将为 Tutorial案例 添加缩略图插件、网格插件、节点提示框、边提示框。","position":{"start":{"line":5,"column":1,"offset":49},"end":{"line":5,"column":41,"offset":89},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":49},"end":{"line":5,"column":41,"offset":89},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#插件","title":null,"children":[],"data":{"hProperties":{"aria-label":"插件 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"插件","position":{"start":{"line":7,"column":4,"offset":94},"end":{"line":7,"column":6,"offset":96},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":91},"end":{"line":7,"column":6,"offset":96},"indent":[]},"data":{"id":"插件","htmlAttributes":{"id":"插件"},"hProperties":{"id":"插件"}}},{"type":"paragraph","children":[{"type":"text","value":"使用插件时，有三个步骤：","position":{"start":{"line":8,"column":1,"offset":97},"end":{"line":8,"column":13,"offset":109},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":8,"column":13,"offset":109},"end":{"line":8,"column":19,"offset":115},"indent":[]}},{"type":"text","value":" Step 1: 引入插件；","position":{"start":{"line":8,"column":19,"offset":115},"end":{"line":8,"column":34,"offset":130},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":8,"column":34,"offset":130},"end":{"line":8,"column":40,"offset":136},"indent":[]}},{"type":"text","value":" Step 2: 实例化插件；","position":{"start":{"line":8,"column":40,"offset":136},"end":{"line":8,"column":56,"offset":152},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":8,"column":56,"offset":152},"end":{"line":8,"column":62,"offset":158},"indent":[]}},{"type":"text","value":" Step 3: 在实例化图时将插件的实例配置到图上。","position":{"start":{"line":8,"column":62,"offset":158},"end":{"line":8,"column":90,"offset":186},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":97},"end":{"line":8,"column":90,"offset":186},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#minimap","title":null,"children":[],"data":{"hProperties":{"aria-label":"minimap permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"Minimap","position":{"start":{"line":10,"column":5,"offset":192},"end":{"line":10,"column":12,"offset":199},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":188},"end":{"line":10,"column":12,"offset":199},"indent":[]},"data":{"id":"minimap","htmlAttributes":{"id":"minimap"},"hProperties":{"id":"minimap"}}},{"type":"paragraph","children":[{"type":"text","value":"缩略图 (Minimap) 是一种常见的用于快速预览和探索图的工具，可作为导航辅助用户探索大规模图。","position":{"start":{"line":11,"column":1,"offset":200},"end":{"line":11,"column":51,"offset":250},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":11,"column":51,"offset":250},"end":{"line":11,"column":57,"offset":256},"indent":[]}},{"type":"image","title":null,"url":"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","position":{"start":{"line":11,"column":57,"offset":256},"end":{"line":11,"column":313,"offset":512},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":200},"end":{"line":11,"column":313,"offset":512},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"现在，我们为 ","position":{"start":{"line":13,"column":1,"offset":514},"end":{"line":13,"column":8,"offset":521},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"Tutorial案例","position":{"start":{"line":13,"column":10,"offset":523},"end":{"line":13,"column":20,"offset":533},"indent":[]}}],"position":{"start":{"line":13,"column":8,"offset":521},"end":{"line":13,"column":22,"offset":535},"indent":[]}},{"type":"text","value":" 配置一个 Minimap：","position":{"start":{"line":13,"column":22,"offset":535},"end":{"line":13,"column":36,"offset":549},"indent":[]}}],"position":{"start":{"line":13,"column":1,"offset":514},"end":{"line":13,"column":36,"offset":549},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#预期效果","title":null,"children":[],"data":{"hProperties":{"aria-label":"预期效果 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"预期效果","position":{"start":{"line":14,"column":6,"offset":555},"end":{"line":14,"column":10,"offset":559},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":550},"end":{"line":14,"column":10,"offset":559},"indent":[]},"data":{"id":"预期效果","htmlAttributes":{"id":"预期效果"},"hProperties":{"id":"预期效果"}}},{"type":"paragraph","children":[{"type":"image","title":null,"url":"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","position":{"start":{"line":15,"column":1,"offset":560},"end":{"line":15,"column":275,"offset":834},"indent":[]}}],"position":{"start":{"line":15,"column":1,"offset":560},"end":{"line":15,"column":275,"offset":834},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#使用方法","title":null,"children":[],"data":{"hProperties":{"aria-label":"使用方法 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"使用方法","position":{"start":{"line":17,"column":6,"offset":841},"end":{"line":17,"column":10,"offset":845},"indent":[]}}],"position":{"start":{"line":17,"column":1,"offset":836},"end":{"line":17,"column":10,"offset":845},"indent":[]},"data":{"id":"使用方法","htmlAttributes":{"id":"使用方法"},"hProperties":{"id":"使用方法"}}},{"type":"paragraph","children":[{"type":"text","value":"Minimap 是 G6 的插件之一，G6 的插件是一个个独立的包，需要单独引入：","position":{"start":{"line":18,"column":1,"offset":846},"end":{"line":18,"column":42,"offset":887},"indent":[]}}],"position":{"start":{"line":18,"column":1,"offset":846},"end":{"line":18,"column":42,"offset":887},"indent":[]}},{"type":"html","lang":"html","meta":null,"value":"<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>","position":{"start":{"line":19,"column":1,"offset":888},"end":{"line":31,"column":4,"offset":1186},"indent":[1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"使用起来非常简单，实例化 Minimap 对象，并将其配置到图实例的插件列表里即可：","position":{"start":{"line":33,"column":1,"offset":1188},"end":{"line":33,"column":43,"offset":1230},"indent":[]}}],"position":{"start":{"line":33,"column":1,"offset":1188},"end":{"line":33,"column":43,"offset":1230},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<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>","position":{"start":{"line":34,"column":1,"offset":1231},"end":{"line":47,"column":4,"offset":1504},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#grid-网格","title":null,"children":[],"data":{"hProperties":{"aria-label":"grid 网格 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"Grid 网格","position":{"start":{"line":49,"column":5,"offset":1510},"end":{"line":49,"column":12,"offset":1517},"indent":[]}}],"position":{"start":{"line":49,"column":1,"offset":1506},"end":{"line":49,"column":12,"offset":1517},"indent":[]},"data":{"id":"grid-网格","htmlAttributes":{"id":"grid-网格"},"hProperties":{"id":"grid-网格"}}},{"type":"paragraph","children":[{"type":"text","value":"网格可用于辅助用户在拖拽节点时对齐到网格。","position":{"start":{"line":50,"column":1,"offset":1518},"end":{"line":50,"column":22,"offset":1539},"indent":[]}}],"position":{"start":{"line":50,"column":1,"offset":1518},"end":{"line":50,"column":22,"offset":1539},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#期待效果","title":null,"children":[],"data":{"hProperties":{"aria-label":"期待效果 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"期待效果","position":{"start":{"line":52,"column":6,"offset":1546},"end":{"line":52,"column":10,"offset":1550},"indent":[]}}],"position":{"start":{"line":52,"column":1,"offset":1541},"end":{"line":52,"column":10,"offset":1550},"indent":[]},"data":{"id":"期待效果","htmlAttributes":{"id":"期待效果"},"hProperties":{"id":"期待效果"}}},{"type":"paragraph","children":[{"type":"image","title":null,"url":"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","position":{"start":{"line":53,"column":1,"offset":1551},"end":{"line":53,"column":268,"offset":1818},"indent":[]}}],"position":{"start":{"line":53,"column":1,"offset":1551},"end":{"line":53,"column":268,"offset":1818},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#使用方法首先引入插件：","title":null,"children":[],"data":{"hProperties":{"aria-label":"使用方法首先引入插件： permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"使用方法首先引入插件：","position":{"start":{"line":55,"column":6,"offset":1825},"end":{"line":55,"column":17,"offset":1836},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":1820},"end":{"line":55,"column":17,"offset":1836},"indent":[]},"data":{"id":"使用方法首先引入插件：","htmlAttributes":{"id":"使用方法首先引入插件："},"hProperties":{"id":"使用方法首先引入插件："}}},{"type":"html","lang":"html","meta":null,"value":"<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>","position":{"start":{"line":56,"column":1,"offset":1837},"end":{"line":71,"column":4,"offset":2253},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"实例化插件和配置插件到图上：","position":{"start":{"line":73,"column":1,"offset":2255},"end":{"line":73,"column":15,"offset":2269},"indent":[]}}],"position":{"start":{"line":73,"column":1,"offset":2255},"end":{"line":73,"column":15,"offset":2269},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<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>","position":{"start":{"line":74,"column":1,"offset":2270},"end":{"line":85,"column":4,"offset":2484},"indent":[1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#交互工具","title":null,"children":[],"data":{"hProperties":{"aria-label":"交互工具 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"交互工具","position":{"start":{"line":87,"column":4,"offset":2489},"end":{"line":87,"column":8,"offset":2493},"indent":[]}}],"position":{"start":{"line":87,"column":1,"offset":2486},"end":{"line":87,"column":8,"offset":2493},"indent":[]},"data":{"id":"交互工具","htmlAttributes":{"id":"交互工具"},"hProperties":{"id":"交互工具"}}},{"type":"paragraph","children":[{"type":"text","value":"交互工具是指配置到图上交互模式中的工具。使用交互工具时，有两个步骤：","position":{"start":{"line":88,"column":1,"offset":2494},"end":{"line":88,"column":35,"offset":2528},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":88,"column":35,"offset":2528},"end":{"line":88,"column":41,"offset":2534},"indent":[]}},{"type":"text","value":" Step 1: 在实例化图时配置 ","position":{"start":{"line":88,"column":41,"offset":2534},"end":{"line":88,"column":60,"offset":2553},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">modes</code>","position":{"start":{"line":88,"column":60,"offset":2553},"end":{"line":88,"column":67,"offset":2560},"indent":[]}},{"type":"text","value":"；","position":{"start":{"line":88,"column":67,"offset":2560},"end":{"line":88,"column":68,"offset":2561},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":88,"column":68,"offset":2561},"end":{"line":88,"column":74,"offset":2567},"indent":[]}},{"type":"text","value":" Step 2: 为交互工具定义样式。","position":{"start":{"line":88,"column":74,"offset":2567},"end":{"line":88,"column":94,"offset":2587},"indent":[]}}],"position":{"start":{"line":88,"column":1,"offset":2494},"end":{"line":88,"column":94,"offset":2587},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#tooltip-节点提示框","title":null,"children":[],"data":{"hProperties":{"aria-label":"tooltip 节点提示框 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"tooltip 节点提示框","position":{"start":{"line":90,"column":5,"offset":2593},"end":{"line":90,"column":18,"offset":2606},"indent":[]}}],"position":{"start":{"line":90,"column":1,"offset":2589},"end":{"line":90,"column":18,"offset":2606},"indent":[]},"data":{"id":"tooltip-节点提示框","htmlAttributes":{"id":"tooltip-节点提示框"},"hProperties":{"id":"tooltip-节点提示框"}}},{"type":"paragraph","children":[{"type":"text","value":"节点提示框可以用在节点的详细信息的展示。当鼠标滑过节点时，显示一个浮层告知节点的详细信息。","position":{"start":{"line":91,"column":1,"offset":2607},"end":{"line":91,"column":46,"offset":2652},"indent":[]}}],"position":{"start":{"line":91,"column":1,"offset":2607},"end":{"line":91,"column":46,"offset":2652},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#预期效果-1","title":null,"children":[],"data":{"hProperties":{"aria-label":"预期效果 1 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"预期效果","position":{"start":{"line":93,"column":6,"offset":2659},"end":{"line":93,"column":10,"offset":2663},"indent":[]}}],"position":{"start":{"line":93,"column":1,"offset":2654},"end":{"line":93,"column":10,"offset":2663},"indent":[]},"data":{"id":"预期效果-1","htmlAttributes":{"id":"预期效果-1"},"hProperties":{"id":"预期效果-1"}}},{"type":"paragraph","children":[{"type":"image","title":null,"url":"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","position":{"start":{"line":94,"column":1,"offset":2664},"end":{"line":94,"column":282,"offset":2945},"indent":[]}}],"position":{"start":{"line":94,"column":1,"offset":2664},"end":{"line":94,"column":282,"offset":2945},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#使用方法-1","title":null,"children":[],"data":{"hProperties":{"aria-label":"使用方法 1 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"使用方法","position":{"start":{"line":96,"column":6,"offset":2952},"end":{"line":96,"column":10,"offset":2956},"indent":[]}}],"position":{"start":{"line":96,"column":1,"offset":2947},"end":{"line":96,"column":10,"offset":2956},"indent":[]},"data":{"id":"使用方法-1","htmlAttributes":{"id":"使用方法-1"},"hProperties":{"id":"使用方法-1"}}},{"type":"paragraph","children":[{"type":"text","value":"实例化图时配置 ","position":{"start":{"line":97,"column":1,"offset":2957},"end":{"line":97,"column":9,"offset":2965},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'tooltip'</code>","position":{"start":{"line":97,"column":9,"offset":2965},"end":{"line":97,"column":20,"offset":2976},"indent":[]}},{"type":"text","value":" 到 ","position":{"start":{"line":97,"column":20,"offset":2976},"end":{"line":97,"column":23,"offset":2979},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">modes</code>","position":{"start":{"line":97,"column":23,"offset":2979},"end":{"line":97,"column":30,"offset":2986},"indent":[]}},{"type":"text","value":" 中：","position":{"start":{"line":97,"column":30,"offset":2986},"end":{"line":97,"column":33,"offset":2989},"indent":[]}}],"position":{"start":{"line":97,"column":1,"offset":2957},"end":{"line":97,"column":33,"offset":2989},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<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>","position":{"start":{"line":98,"column":1,"offset":2990},"end":{"line":115,"column":4,"offset":3316},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"由于 tooltip 实际上是一个悬浮的 ","position":{"start":{"line":117,"column":1,"offset":3318},"end":{"line":117,"column":22,"offset":3339},"indent":[]}},{"type":"html","value":"<code class=\"language-text\"><div></code>","position":{"start":{"line":117,"column":22,"offset":3339},"end":{"line":117,"column":29,"offset":3346},"indent":[]}},{"type":"text","value":" 标签，因此可在 HTML 的 ","position":{"start":{"line":117,"column":29,"offset":3346},"end":{"line":117,"column":45,"offset":3362},"indent":[]}},{"type":"html","value":"<code class=\"language-text\"><style></code>","position":{"start":{"line":117,"column":45,"offset":3362},"end":{"line":117,"column":54,"offset":3371},"indent":[]}},{"type":"text","value":" 标签或 CSS 中设置样式。下面展示在 HTML 中设置样式：","position":{"start":{"line":117,"column":54,"offset":3371},"end":{"line":117,"column":86,"offset":3403},"indent":[]}}],"position":{"start":{"line":117,"column":1,"offset":3318},"end":{"line":117,"column":86,"offset":3403},"indent":[]}},{"type":"html","lang":"html","meta":null,"value":"<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>","position":{"start":{"line":118,"column":1,"offset":3404},"end":{"line":136,"column":4,"offset":3781},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#edge-tooltip-边提示框","title":null,"children":[],"data":{"hProperties":{"aria-label":"edge tooltip 边提示框 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"edge-tooltip 边提示框","position":{"start":{"line":138,"column":5,"offset":3787},"end":{"line":138,"column":22,"offset":3804},"indent":[]}}],"position":{"start":{"line":138,"column":1,"offset":3783},"end":{"line":138,"column":22,"offset":3804},"indent":[]},"data":{"id":"edge-tooltip-边提示框","htmlAttributes":{"id":"edge-tooltip-边提示框"},"hProperties":{"id":"edge-tooltip-边提示框"}}},{"type":"paragraph","children":[{"type":"text","value":"节点提示框可以用在节点的详细信息的展示。当鼠标滑过边时，显示一个浮层告知边的详细信息。","position":{"start":{"line":139,"column":1,"offset":3805},"end":{"line":139,"column":44,"offset":3848},"indent":[]}}],"position":{"start":{"line":139,"column":1,"offset":3805},"end":{"line":139,"column":44,"offset":3848},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#预期效果-2","title":null,"children":[],"data":{"hProperties":{"aria-label":"预期效果 2 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"预期效果","position":{"start":{"line":140,"column":6,"offset":3854},"end":{"line":140,"column":10,"offset":3858},"indent":[]}}],"position":{"start":{"line":140,"column":1,"offset":3849},"end":{"line":140,"column":10,"offset":3858},"indent":[]},"data":{"id":"预期效果-2","htmlAttributes":{"id":"预期效果-2"},"hProperties":{"id":"预期效果-2"}}},{"type":"paragraph","children":[{"type":"image","title":null,"url":"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","position":{"start":{"line":141,"column":1,"offset":3859},"end":{"line":141,"column":282,"offset":4140},"indent":[]}}],"position":{"start":{"line":141,"column":1,"offset":3859},"end":{"line":141,"column":282,"offset":4140},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#使用方法-2","title":null,"children":[],"data":{"hProperties":{"aria-label":"使用方法 2 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"使用方法","position":{"start":{"line":143,"column":6,"offset":4147},"end":{"line":143,"column":10,"offset":4151},"indent":[]}}],"position":{"start":{"line":143,"column":1,"offset":4142},"end":{"line":143,"column":10,"offset":4151},"indent":[]},"data":{"id":"使用方法-2","htmlAttributes":{"id":"使用方法-2"},"hProperties":{"id":"使用方法-2"}}},{"type":"html","lang":"javascript","meta":null,"value":"<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>","position":{"start":{"line":144,"column":1,"offset":4152},"end":{"line":164,"column":4,"offset":4593},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"与 tooltip 相同，edge-tooltip 是一个悬浮的 ","position":{"start":{"line":166,"column":1,"offset":4595},"end":{"line":166,"column":34,"offset":4628},"indent":[]}},{"type":"html","value":"<code class=\"language-text\"><div></code>","position":{"start":{"line":166,"column":34,"offset":4628},"end":{"line":166,"column":41,"offset":4635},"indent":[]}},{"type":"text","value":" 标签，可以使用与 tooltip 相同的方法设置其悬浮框的样式。","position":{"start":{"line":166,"column":41,"offset":4635},"end":{"line":166,"column":74,"offset":4668},"indent":[]}}],"position":{"start":{"line":166,"column":1,"offset":4595},"end":{"line":166,"column":74,"offset":4668},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#完整代码","title":null,"children":[],"data":{"hProperties":{"aria-label":"完整代码 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"完整代码","position":{"start":{"line":168,"column":4,"offset":4673},"end":{"line":168,"column":8,"offset":4677},"indent":[]}}],"position":{"start":{"line":168,"column":1,"offset":4670},"end":{"line":168,"column":8,"offset":4677},"indent":[]},"data":{"id":"完整代码","htmlAttributes":{"id":"完整代码"},"hProperties":{"id":"完整代码"}}},{"type":"paragraph","children":[{"type":"text","value":"至此，Tutorial-案例 完成，完整代码见：","position":{"start":{"line":169,"column":1,"offset":4678},"end":{"line":169,"column":25,"offset":4702},"indent":[]}},{"type":"link","title":null,"url":"https://codepen.io/Yanyan-Wang/pen/mdbYZvZ","children":[{"type":"text","value":"Tutorial案例代码","position":{"start":{"line":169,"column":26,"offset":4703},"end":{"line":169,"column":38,"offset":4715},"indent":[]}}],"position":{"start":{"line":169,"column":25,"offset":4702},"end":{"line":169,"column":83,"offset":4760},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"。","position":{"start":{"line":169,"column":83,"offset":4760},"end":{"line":169,"column":84,"offset":4761},"indent":[]}}],"position":{"start":{"line":169,"column":1,"offset":4678},"end":{"line":169,"column":84,"offset":4761},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":" ","position":{"start":{"line":171,"column":1,"offset":4763},"end":{"line":171,"column":2,"offset":4764},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">注意</code>","position":{"start":{"line":171,"column":2,"offset":4764},"end":{"line":171,"column":6,"offset":4768},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":171,"column":6,"offset":4768},"end":{"line":171,"column":7,"offset":4769},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":171,"column":7,"offset":4769},"end":{"line":171,"column":13,"offset":4775},"indent":[]}},{"type":"text","value":"若需更换数据，请替换 ","position":{"start":{"line":171,"column":13,"offset":4775},"end":{"line":171,"column":24,"offset":4786},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'</code>","position":{"start":{"line":171,"column":24,"offset":4786},"end":{"line":171,"column":115,"offset":4877},"indent":[]}},{"type":"text","value":" 为新的数据文件地址。","position":{"start":{"line":171,"column":115,"offset":4877},"end":{"line":171,"column":126,"offset":4888},"indent":[]}}],"position":{"start":{"line":171,"column":1,"offset":4763},"end":{"line":171,"column":126,"offset":4888},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":172,"column":1,"offset":4889}}}}