G6 图可视化引擎——入门教程——插件与工具
生活随笔
收集整理的這篇文章主要介紹了
G6 图可视化引擎——入门教程——插件与工具
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
為輔助用戶在圖上探索，G6 提供了一些輔助工具，其中一部分是插件工具，另一部分是交互工具。
本文將為 Tutorial 案例 添加縮略圖插件、網格插件、節點提示框、邊提示框。
插件
使用插件時，有三個步驟：
Minimap
縮略圖 (Minimap) 是一種常見的用于快速預覽和探索圖的工具，可作為導航輔助用戶探索大規模圖。
現在，我們為 Tutorial 案例 配置一個 Minimap：
預期效果
使用方法
Minimap 是 G6 的插件之一，引入 G6 后可以直接使用。實例化 Minimap 對象，并將其配置到圖實例的插件列表里即可：
// 實例化 minimap 插件 const minimap = new G6.Minimap({size: [100, 100],className: 'minimap',type: 'delegate', });// 實例化圖 const graph = new G6.Graph({// ... // 其他配置項plugins: [minimap], // 將 minimap 實例配置到圖上 });Grid 網格
網格可用于輔助用戶在拖拽節點時對齊到網格。
預期效果
使用方法 實例化插件和配置插件到圖上：
// const minimap = ...// 實例化 grid 插件 const grid = new G6.Grid();// 實例化圖 const graph = new G6.Graph({// ... // 其他配置項plugins: [minimap, grid], // 將 grid 實例配置到圖上 });交互工具
交互工具是指配置到圖上交互模式中的工具。使用交互工具時，有兩個步驟：
tooltip 節點提示框
節點提示框可以用在邊的詳細信息的展示。當鼠標滑過節點時，顯示一個浮層告知節點的詳細信息。
預期效果
使用方法
實例化圖時配置 ‘tooltip’ 到 modes 中：
const graph = new G6.Graph({modes: {default: [// ...{type: 'tooltip', // 提示框formatText(model) {// 提示框文本內容const text = 'label: ' + model.label + '<br/> class: ' + model.class;return text;},},],}, });由于 tooltip 實際上是一個懸浮的 <div> 標簽，因此可在 HTML 的 <style> 標簽或 CSS 中設置樣式。下面展示在 HTML 中設置樣式：
<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 邊提示框
邊提示框可以用在邊的詳細信息的展示。當鼠標滑過邊時，顯示一個浮層告知邊的詳細信息。
預期效果
使用方法
與 tooltip 相同，edge-tooltip 是一個懸浮的
標簽，可以使用與 tooltip 相同的方法設置其懸浮框的樣式。完整代碼
至此，Tutorial 案例 完成，完整代碼見：Tutorial 案例代碼。
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的G6 图可视化引擎——入门教程——插件与工具的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： G6 图可视化引擎——入门教程——图的交
- 下一篇： G6 图可视化引擎——入门教程——动画