{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ast-0f7ba82bda743ea42b66a892d1cb67e3-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"为辅助用户在图上探索，G6 提供了一些辅助工具，其中一部分是插件工具，另一部分是交互工具。","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":46,"offset":46}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":46,"offset":46}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"本文将为 Tutorial案例 添加缩略图插件、网格插件、节点提示框、边提示框。","position":{"start":{"line":5,"column":1,"offset":49},"end":{"line":5,"column":41,"offset":89}}}],"position":{"start":{"line":5,"column":1,"offset":49},"end":{"line":5,"column":41,"offset":89}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"插件"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%8F%92%E4%BB%B6","aria-label":"插件 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"插件","position":{"start":{"line":7,"column":4,"offset":94},"end":{"line":7,"column":6,"offset":96}}}],"position":{"start":{"line":7,"column":1,"offset":91},"end":{"line":7,"column":6,"offset":96}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"使用插件时，有三个步骤：","position":{"start":{"line":8,"column":1,"offset":97},"end":{"line":8,"column":13,"offset":109}}},{"type":"raw","value":"
","position":{"start":{"line":8,"column":13,"offset":109},"end":{"line":8,"column":19,"offset":115}}},{"type":"text","value":"  Step 1: 引入插件；","position":{"start":{"line":8,"column":19,"offset":115},"end":{"line":8,"column":34,"offset":130}}},{"type":"raw","value":"
","position":{"start":{"line":8,"column":34,"offset":130},"end":{"line":8,"column":40,"offset":136}}},{"type":"text","value":"  Step 2: 实例化插件；","position":{"start":{"line":8,"column":40,"offset":136},"end":{"line":8,"column":56,"offset":152}}},{"type":"raw","value":"
","position":{"start":{"line":8,"column":56,"offset":152},"end":{"line":8,"column":62,"offset":158}}},{"type":"text","value":"  Step 3: 在实例化图时将插件的实例配置到图上。","position":{"start":{"line":8,"column":62,"offset":158},"end":{"line":8,"column":90,"offset":186}}}],"position":{"start":{"line":8,"column":1,"offset":97},"end":{"line":8,"column":90,"offset":186}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"minimap"},"children":[{"type":"element","tagName":"a","properties":{"href":"#minimap","aria-label":"minimap permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"Minimap","position":{"start":{"line":10,"column":5,"offset":192},"end":{"line":10,"column":12,"offset":199}}}],"position":{"start":{"line":10,"column":1,"offset":188},"end":{"line":10,"column":12,"offset":199}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"缩略图 (Minimap) 是一种常见的用于快速预览和探索图的工具，可作为导航辅助用户探索大规模图。","position":{"start":{"line":11,"column":1,"offset":200},"end":{"line":11,"column":51,"offset":250}}},{"type":"raw","value":"
","position":{"start":{"line":11,"column":51,"offset":250},"end":{"line":11,"column":57,"offset":256}}},{"type":"element","tagName":"img","properties":{"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"},"children":[],"position":{"start":{"line":11,"column":57,"offset":256},"end":{"line":11,"column":313,"offset":512}}}],"position":{"start":{"line":11,"column":1,"offset":200},"end":{"line":11,"column":313,"offset":512}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"现在，我们为 ","position":{"start":{"line":13,"column":1,"offset":514},"end":{"line":13,"column":8,"offset":521}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Tutorial案例","position":{"start":{"line":13,"column":10,"offset":523},"end":{"line":13,"column":20,"offset":533}}}],"position":{"start":{"line":13,"column":8,"offset":521},"end":{"line":13,"column":22,"offset":535}}},{"type":"text","value":" 配置一个 Minimap：","position":{"start":{"line":13,"column":22,"offset":535},"end":{"line":13,"column":36,"offset":549}}}],"position":{"start":{"line":13,"column":1,"offset":514},"end":{"line":13,"column":36,"offset":549}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"预期效果"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%A2%84%E6%9C%9F%E6%95%88%E6%9E%9C","aria-label":"预期效果 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"预期效果","position":{"start":{"line":14,"column":6,"offset":555},"end":{"line":14,"column":10,"offset":559}}}],"position":{"start":{"line":14,"column":1,"offset":550},"end":{"line":14,"column":10,"offset":559}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"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"},"children":[],"position":{"start":{"line":15,"column":1,"offset":560},"end":{"line":15,"column":275,"offset":834}}}],"position":{"start":{"line":15,"column":1,"offset":560},"end":{"line":15,"column":275,"offset":834}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"使用方法"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95","aria-label":"使用方法 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"使用方法","position":{"start":{"line":17,"column":6,"offset":841},"end":{"line":17,"column":10,"offset":845}}}],"position":{"start":{"line":17,"column":1,"offset":836},"end":{"line":17,"column":10,"offset":845}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Minimap 是 G6 的插件之一，G6 的插件是一个个独立的包，需要单独引入：","position":{"start":{"line":18,"column":1,"offset":846},"end":{"line":18,"column":42,"offset":887}}}],"position":{"start":{"line":18,"column":1,"offset":846},"end":{"line":18,"column":42,"offset":887}}},{"type":"text","value":"\n"},{"type":"raw","value":"
<body>\n  <!-- 引入 G6 -->\n  <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js\"></script>\n  \n  <!-- 引入 Minimap -->\n  <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/minimap.js\"></script>\n  \n  <script>\n    // ...\n  </script>\n</body>
","position":{"start":{"line":19,"column":1,"offset":888},"end":{"line":31,"column":4,"offset":1186}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"使用起来非常简单，实例化 Minimap 对象，并将其配置到图实例的插件列表里即可：","position":{"start":{"line":33,"column":1,"offset":1188},"end":{"line":33,"column":43,"offset":1230}}}],"position":{"start":{"line":33,"column":1,"offset":1188},"end":{"line":33,"column":43,"offset":1230}}},{"type":"text","value":"\n"},{"type":"raw","value":"
// 实例化 minimap 插件\nconst minimap = new Minimap({\n  size: [100, 100],\n  className: 'minimap',\n  type: 'delegate',\n});\n\n// 实例化图\nconst graph = new G6.Graph({\n  // ...                           // 其他配置项\n  plugins: [minimap], // 将 minimap 实例配置到图上\n});\n
","position":{"start":{"line":34,"column":1,"offset":1231},"end":{"line":47,"column":4,"offset":1504}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"grid-网格"},"children":[{"type":"element","tagName":"a","properties":{"href":"#grid-%E7%BD%91%E6%A0%BC","aria-label":"grid 网格 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"Grid 网格","position":{"start":{"line":49,"column":5,"offset":1510},"end":{"line":49,"column":12,"offset":1517}}}],"position":{"start":{"line":49,"column":1,"offset":1506},"end":{"line":49,"column":12,"offset":1517}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"网格可用于辅助用户在拖拽节点时对齐到网格。","position":{"start":{"line":50,"column":1,"offset":1518},"end":{"line":50,"column":22,"offset":1539}}}],"position":{"start":{"line":50,"column":1,"offset":1518},"end":{"line":50,"column":22,"offset":1539}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"期待效果"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%9C%9F%E5%BE%85%E6%95%88%E6%9E%9C","aria-label":"期待效果 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"期待效果","position":{"start":{"line":52,"column":6,"offset":1546},"end":{"line":52,"column":10,"offset":1550}}}],"position":{"start":{"line":52,"column":1,"offset":1541},"end":{"line":52,"column":10,"offset":1550}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"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"},"children":[],"position":{"start":{"line":53,"column":1,"offset":1551},"end":{"line":53,"column":268,"offset":1818}}}],"position":{"start":{"line":53,"column":1,"offset":1551},"end":{"line":53,"column":268,"offset":1818}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"使用方法首先引入插件："},"children":[{"type":"element","tagName":"a","properties":{"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"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"使用方法首先引入插件：","position":{"start":{"line":55,"column":6,"offset":1825},"end":{"line":55,"column":17,"offset":1836}}}],"position":{"start":{"line":55,"column":1,"offset":1820},"end":{"line":55,"column":17,"offset":1836}}},{"type":"text","value":"\n"},{"type":"raw","value":"
<body>\n  <!-- 引入 G6 -->\n  <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js\"></script>\n  \n  <!-- 引入 Minimap -->\n  <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/minimap.js\"></script>\n  \n  <!-- 引入 Grid -->\n  <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/grid.js\"></script>\n  \n  <script>\n    // ...\n  </script>\n</body>
","position":{"start":{"line":56,"column":1,"offset":1837},"end":{"line":71,"column":4,"offset":2253}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"实例化插件和配置插件到图上：","position":{"start":{"line":73,"column":1,"offset":2255},"end":{"line":73,"column":15,"offset":2269}}}],"position":{"start":{"line":73,"column":1,"offset":2255},"end":{"line":73,"column":15,"offset":2269}}},{"type":"text","value":"\n"},{"type":"raw","value":"
// const minimap = ...\n\n// 实例化 grid 插件\nconst grid = new Grid();\n\n// 实例化图\nconst graph = new G6.Graph({\n  // ...                        // 其他配置项\n  plugins: [minimap, grid], // 将 grid 实例配置到图上\n});\n
","position":{"start":{"line":74,"column":1,"offset":2270},"end":{"line":85,"column":4,"offset":2484}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"交互工具"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BA%A4%E4%BA%92%E5%B7%A5%E5%85%B7","aria-label":"交互工具 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"交互工具","position":{"start":{"line":87,"column":4,"offset":2489},"end":{"line":87,"column":8,"offset":2493}}}],"position":{"start":{"line":87,"column":1,"offset":2486},"end":{"line":87,"column":8,"offset":2493}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"交互工具是指配置到图上交互模式中的工具。使用交互工具时，有两个步骤：","position":{"start":{"line":88,"column":1,"offset":2494},"end":{"line":88,"column":35,"offset":2528}}},{"type":"raw","value":"
","position":{"start":{"line":88,"column":35,"offset":2528},"end":{"line":88,"column":41,"offset":2534}}},{"type":"text","value":"  Step 1: 在实例化图时配置 ","position":{"start":{"line":88,"column":41,"offset":2534},"end":{"line":88,"column":60,"offset":2553}}},{"type":"raw","value":"modes","position":{"start":{"line":88,"column":60,"offset":2553},"end":{"line":88,"column":67,"offset":2560}}},{"type":"text","value":"；","position":{"start":{"line":88,"column":67,"offset":2560},"end":{"line":88,"column":68,"offset":2561}}},{"type":"raw","value":"
","position":{"start":{"line":88,"column":68,"offset":2561},"end":{"line":88,"column":74,"offset":2567}}},{"type":"text","value":"  Step 2: 为交互工具定义样式。","position":{"start":{"line":88,"column":74,"offset":2567},"end":{"line":88,"column":94,"offset":2587}}}],"position":{"start":{"line":88,"column":1,"offset":2494},"end":{"line":88,"column":94,"offset":2587}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"tooltip-节点提示框"},"children":[{"type":"element","tagName":"a","properties":{"href":"#tooltip-%E8%8A%82%E7%82%B9%E6%8F%90%E7%A4%BA%E6%A1%86","aria-label":"tooltip 节点提示框 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"tooltip 节点提示框","position":{"start":{"line":90,"column":5,"offset":2593},"end":{"line":90,"column":18,"offset":2606}}}],"position":{"start":{"line":90,"column":1,"offset":2589},"end":{"line":90,"column":18,"offset":2606}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"节点提示框可以用在节点的详细信息的展示。当鼠标滑过节点时，显示一个浮层告知节点的详细信息。","position":{"start":{"line":91,"column":1,"offset":2607},"end":{"line":91,"column":46,"offset":2652}}}],"position":{"start":{"line":91,"column":1,"offset":2607},"end":{"line":91,"column":46,"offset":2652}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"预期效果-1"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%A2%84%E6%9C%9F%E6%95%88%E6%9E%9C-1","aria-label":"预期效果 1 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"预期效果","position":{"start":{"line":93,"column":6,"offset":2659},"end":{"line":93,"column":10,"offset":2663}}}],"position":{"start":{"line":93,"column":1,"offset":2654},"end":{"line":93,"column":10,"offset":2663}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"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"},"children":[],"position":{"start":{"line":94,"column":1,"offset":2664},"end":{"line":94,"column":282,"offset":2945}}}],"position":{"start":{"line":94,"column":1,"offset":2664},"end":{"line":94,"column":282,"offset":2945}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"使用方法-1"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95-1","aria-label":"使用方法 1 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"使用方法","position":{"start":{"line":96,"column":6,"offset":2952},"end":{"line":96,"column":10,"offset":2956}}}],"position":{"start":{"line":96,"column":1,"offset":2947},"end":{"line":96,"column":10,"offset":2956}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"实例化图时配置 ","position":{"start":{"line":97,"column":1,"offset":2957},"end":{"line":97,"column":9,"offset":2965}}},{"type":"raw","value":"'tooltip'","position":{"start":{"line":97,"column":9,"offset":2965},"end":{"line":97,"column":20,"offset":2976}}},{"type":"text","value":" 到 ","position":{"start":{"line":97,"column":20,"offset":2976},"end":{"line":97,"column":23,"offset":2979}}},{"type":"raw","value":"modes","position":{"start":{"line":97,"column":23,"offset":2979},"end":{"line":97,"column":30,"offset":2986}}},{"type":"text","value":" 中：","position":{"start":{"line":97,"column":30,"offset":2986},"end":{"line":97,"column":33,"offset":2989}}}],"position":{"start":{"line":97,"column":1,"offset":2957},"end":{"line":97,"column":33,"offset":2989}}},{"type":"text","value":"\n"},{"type":"raw","value":"
const graph = new G6.Graph({\n  modes: {\n    default: [\n      // ...\n      {\n        type: 'tooltip', // 提示框\n        formatText(model) {\n          // 提示框文本内容\n          const text = 'label: ' + model.label + '<br/> class: ' + model.class;\n          return text;\n        },\n      },\n    ],\n  },\n});\n
","position":{"start":{"line":98,"column":1,"offset":2990},"end":{"line":115,"column":4,"offset":3316}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"由于 tooltip 实际上是一个悬浮的 ","position":{"start":{"line":117,"column":1,"offset":3318},"end":{"line":117,"column":22,"offset":3339}}},{"type":"raw","value":"<div>","position":{"start":{"line":117,"column":22,"offset":3339},"end":{"line":117,"column":29,"offset":3346}}},{"type":"text","value":" 标签，因此可在 HTML 的 ","position":{"start":{"line":117,"column":29,"offset":3346},"end":{"line":117,"column":45,"offset":3362}}},{"type":"raw","value":"<style>","position":{"start":{"line":117,"column":45,"offset":3362},"end":{"line":117,"column":54,"offset":3371}}},{"type":"text","value":" 标签或 CSS 中设置样式。下面展示在 HTML 中设置样式：","position":{"start":{"line":117,"column":54,"offset":3371},"end":{"line":117,"column":86,"offset":3403}}}],"position":{"start":{"line":117,"column":1,"offset":3318},"end":{"line":117,"column":86,"offset":3403}}},{"type":"text","value":"\n"},{"type":"raw","value":"
<head>\n  <meta charset=\"UTF-8\" />\n  <title>Tutorial Demo</title>\n\n  <style>\n    /* 提示框的样式 */\n    .g6-tooltip {\n      border: 1px solid #e2e2e2;\n      border-radius: 4px;\n      font-size: 12px;\n      color: #545454;\n      background-color: rgba(255, 255, 255, 0.9);\n      padding: 10px 8px;\n      box-shadow: rgb(174, 174, 174) 0px 0px 10px;\n    }\n  </style>\n</head>
","position":{"start":{"line":118,"column":1,"offset":3404},"end":{"line":136,"column":4,"offset":3781}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"edge-tooltip-边提示框"},"children":[{"type":"element","tagName":"a","properties":{"href":"#edge-tooltip-%E8%BE%B9%E6%8F%90%E7%A4%BA%E6%A1%86","aria-label":"edge tooltip 边提示框 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"edge-tooltip 边提示框","position":{"start":{"line":138,"column":5,"offset":3787},"end":{"line":138,"column":22,"offset":3804}}}],"position":{"start":{"line":138,"column":1,"offset":3783},"end":{"line":138,"column":22,"offset":3804}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"节点提示框可以用在节点的详细信息的展示。当鼠标滑过边时，显示一个浮层告知边的详细信息。","position":{"start":{"line":139,"column":1,"offset":3805},"end":{"line":139,"column":44,"offset":3848}}}],"position":{"start":{"line":139,"column":1,"offset":3805},"end":{"line":139,"column":44,"offset":3848}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"预期效果-2"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%A2%84%E6%9C%9F%E6%95%88%E6%9E%9C-2","aria-label":"预期效果 2 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"预期效果","position":{"start":{"line":140,"column":6,"offset":3854},"end":{"line":140,"column":10,"offset":3858}}}],"position":{"start":{"line":140,"column":1,"offset":3849},"end":{"line":140,"column":10,"offset":3858}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"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"},"children":[],"position":{"start":{"line":141,"column":1,"offset":3859},"end":{"line":141,"column":282,"offset":4140}}}],"position":{"start":{"line":141,"column":1,"offset":3859},"end":{"line":141,"column":282,"offset":4140}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"使用方法-2"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95-2","aria-label":"使用方法 2 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"使用方法","position":{"start":{"line":143,"column":6,"offset":4147},"end":{"line":143,"column":10,"offset":4151}}}],"position":{"start":{"line":143,"column":1,"offset":4142},"end":{"line":143,"column":10,"offset":4151}}},{"type":"text","value":"\n"},{"type":"raw","value":"
const graph = new G6.Graph({\n  modes: {\n    default: [\n      // ...\n      {\n        type: 'tooltip', // 节点提示框\n        // ...\n      },\n      {\n        type: 'edge-tooltip', // 边提示框\n        formatText(model) {\n          // 边提示框文本内容\n          const text =\n            'source: ' +\n            model.source +\n            '<br/> target: ' +\n            model.target +\n            '<br/> weight: ' +\n            model.weight;\n          return text;\n        },\n      },\n    ],\n  },\n});\n
","position":{"start":{"line":144,"column":1,"offset":4152},"end":{"line":164,"column":4,"offset":4593}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"与 tooltip 相同，edge-tooltip 是一个悬浮的 ","position":{"start":{"line":166,"column":1,"offset":4595},"end":{"line":166,"column":34,"offset":4628}}},{"type":"raw","value":"<div>","position":{"start":{"line":166,"column":34,"offset":4628},"end":{"line":166,"column":41,"offset":4635}}},{"type":"text","value":" 标签，可以使用与 tooltip 相同的方法设置其悬浮框的样式。","position":{"start":{"line":166,"column":41,"offset":4635},"end":{"line":166,"column":74,"offset":4668}}}],"position":{"start":{"line":166,"column":1,"offset":4595},"end":{"line":166,"column":74,"offset":4668}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"完整代码"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81","aria-label":"完整代码 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"完整代码","position":{"start":{"line":168,"column":4,"offset":4673},"end":{"line":168,"column":8,"offset":4677}}}],"position":{"start":{"line":168,"column":1,"offset":4670},"end":{"line":168,"column":8,"offset":4677}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"至此，Tutorial-案例 完成，完整代码见：","position":{"start":{"line":169,"column":1,"offset":4678},"end":{"line":169,"column":25,"offset":4702}}},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/Yanyan-Wang/pen/mdbYZvZ","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Tutorial案例代码","position":{"start":{"line":169,"column":26,"offset":4703},"end":{"line":169,"column":38,"offset":4715}}}],"position":{"start":{"line":169,"column":25,"offset":4702},"end":{"line":169,"column":83,"offset":4760}}},{"type":"text","value":"。","position":{"start":{"line":169,"column":83,"offset":4760},"end":{"line":169,"column":84,"offset":4761}}}],"position":{"start":{"line":169,"column":1,"offset":4678},"end":{"line":169,"column":84,"offset":4761}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" ","position":{"start":{"line":171,"column":1,"offset":4763},"end":{"line":171,"column":2,"offset":4764}}},{"type":"raw","value":"注意","position":{"start":{"line":171,"column":2,"offset":4764},"end":{"line":171,"column":6,"offset":4768}}},{"type":"text","value":" ","position":{"start":{"line":171,"column":6,"offset":4768},"end":{"line":171,"column":7,"offset":4769}}},{"type":"raw","value":"
","position":{"start":{"line":171,"column":7,"offset":4769},"end":{"line":171,"column":13,"offset":4775}}},{"type":"text","value":"若需更换数据，请替换 ","position":{"start":{"line":171,"column":13,"offset":4775},"end":{"line":171,"column":24,"offset":4786}}},{"type":"raw","value":"'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'","position":{"start":{"line":171,"column":24,"offset":4786},"end":{"line":171,"column":115,"offset":4877}}},{"type":"text","value":" 为新的数据文件地址。","position":{"start":{"line":171,"column":115,"offset":4877},"end":{"line":171,"column":126,"offset":4888}}}],"position":{"start":{"line":171,"column":1,"offset":4763},"end":{"line":171,"column":126,"offset":4888}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":172,"column":1,"offset":4889}}}}