G6 图可视化引擎——入门教程——插件与工具
為輔助用戶在圖上探索，G6 提供了一些輔助工具，其中一部分是插件工具，另一部分是交互工具。
本文將為 Tutorial 案例 添加縮略圖插件、網(wǎng)格插件、節(jié)點(diǎn)提示框、邊提示框。
插件
使用插件時(shí)，有三個步驟：
Minimap
縮略圖 (Minimap) 是一種常見的用于快速預(yù)覽和探索圖的工具，可作為導(dǎo)航輔助用戶探索大規(guī)模圖。
現(xiàn)在，我們?yōu)?Tutorial 案例 配置一個 Minimap：
預(yù)期效果
使用方法
Minimap 是 G6 的插件之一，引入 G6 后可以直接使用。實(shí)例化 Minimap 對象，并將其配置到圖實(shí)例的插件列表里即可：
// 實(shí)例化 minimap 插件 const minimap = new G6.Minimap({size: [100, 100],className: 'minimap',type: 'delegate', });// 實(shí)例化圖 const graph = new G6.Graph({// ... // 其他配置項(xiàng)plugins: [minimap], // 將 minimap 實(shí)例配置到圖上 });Grid 網(wǎng)格
網(wǎng)格可用于輔助用戶在拖拽節(jié)點(diǎn)時(shí)對齊到網(wǎng)格。
預(yù)期效果
使用方法 實(shí)例化插件和配置插件到圖上：
// const minimap = ...// 實(shí)例化 grid 插件 const grid = new G6.Grid();// 實(shí)例化圖 const graph = new G6.Graph({// ... // 其他配置項(xiàng)plugins: [minimap, grid], // 將 grid 實(shí)例配置到圖上 });交互工具
交互工具是指配置到圖上交互模式中的工具。使用交互工具時(shí)，有兩個步驟：
tooltip 節(jié)點(diǎn)提示框
節(jié)點(diǎn)提示框可以用在邊的詳細(xì)信息的展示。當(dāng)鼠標(biāo)滑過節(jié)點(diǎn)時(shí)，顯示一個浮層告知節(jié)點(diǎn)的詳細(xì)信息。
預(yù)期效果
使用方法
實(shí)例化圖時(shí)配置 ‘tooltip’ 到 modes 中：
const graph = new G6.Graph({modes: {default: [// ...{type: 'tooltip', // 提示框formatText(model) {// 提示框文本內(nèi)容const text = 'label: ' + model.label + '<br/> class: ' + model.class;return text;},},],}, });由于 tooltip 實(shí)際上是一個懸浮的 <div> 標(biāo)簽，因此可在 HTML 的 <style> 標(biāo)簽或 CSS 中設(shè)置樣式。下面展示在 HTML 中設(shè)置樣式：
<head><meta charset="UTF-8" /><title>Tutorial Demo</title><style>/* 提示框的樣式 */.g6-tooltip {border: 1px solid #e2e2e2;border-radius: 4px;font-size: 12px;color: #545454;background-color: rgba(255, 255, 255, 0.9);padding: 10px 8px;box-shadow: rgb(174, 174, 174) 0px 0px 10px;}</style> </head>edge-tooltip 邊提示框
邊提示框可以用在邊的詳細(xì)信息的展示。當(dāng)鼠標(biāo)滑過邊時(shí)，顯示一個浮層告知邊的詳細(xì)信息。
預(yù)期效果
使用方法
與 tooltip 相同，edge-tooltip 是一個懸浮的
標(biāo)簽，可以使用與 tooltip 相同的方法設(shè)置其懸浮框的樣式。完整代碼
至此，Tutorial 案例 完成，完整代碼見：Tutorial 案例代碼。
與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的G6 图可视化引擎——入门教程——插件与工具的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： G6 图可视化引擎——入门教程——图的交
- 下一篇： G6 图可视化引擎——入门教程——动画