G6 图可视化引擎——快速上手
生活随笔
收集整理的這篇文章主要介紹了
G6 图可视化引擎——快速上手
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
安裝 & 引用
在項目中引入 G6 有以下兩種方式：NPM 引入；CDN 引入。
Step 1: 使用命令行在項目目錄下執行以下命令：
npm install --save @antv/g6Step 2: 在需要用的 G6 的 JS 文件中導入：
import G6 from '@antv/g6';?? 注意:
- 在 {$version} 中填寫版本號，例如 3.4.7；
- 最新版可以在 NPM 查看最新版本及版本號；
- 詳情參考 Github 分支：https://github.com/antvis/g6/tree/master。
快速試用
創建一個 G6 的關系圖僅需要下面幾個步驟：
Step 1 創建容器
需要在 HTML 中創建一個用于容納 G6 繪制的圖的容器，通常為 div 標簽。G6 在繪制時會在該容器下追加 canvas 標簽，然后將圖繪制在其中。
<div id="mountNode"></div>Step 2 數據準備
引入 G6 的數據源為 JSON 格式的對象。該對象中需要有節點（nodes）和邊（edges）字段，分別用數組表示：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>01.快速試用</title> </head> <body> <div id="mountNode"></div><script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.4.7/dist/g6.min.js"></script> <script>const data = {// 點集nodes: [{id: 'node1', // String，該節點存在則必須，節點的唯一標識x: 100, // Number，可選，節點位置的 x 值y: 200, // Number，可選，節點位置的 y 值},{id: 'node2', // String，該節點存在則必須，節點的唯一標識x: 300, // Number，可選，節點位置的 x 值y: 200, // Number，可選，節點位置的 y 值},],// 邊集edges: [{source: 'node1', // String，必須，起始點 idtarget: 'node2', // String，必須，目標點 id},],}; </script> </body> </html>注意
- nodes 數組中包含節點對象。每個節點對象中唯一的、必要的 id 以標識不同的節點，x、 y 指定該節點的位置；
- edges 數組中包含邊對象。source 和 target 是每條邊的必要屬性，分別代表了該邊的起始點 id 與 目標點 id。
Step 3 創建關系圖
創建關系圖（實例化）時，至少需要為圖設置容器、寬和高。
const graph = new G6.Graph({container: 'mountNode', // String | HTMLElement，必須，在 Step 1 中創建的容器 id 或容器本身width: 800, // Number，必須，圖的寬度height: 500, // Number，必須，圖的高度 });Step 4 配置數據源，渲染
graph.data(data); // 讀取 Step 2 中的數據源到圖上 graph.render(); // 渲染圖最終的結果
完整代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>01.快速試用</title> </head> <body> <div id="mountNode"></div><script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.4.7/dist/g6.min.js"></script> <script>const data = {// 點集nodes: [{id: 'node1', // String，該節點存在則必須，節點的唯一標識x: 100, // Number，可選，節點位置的 x 值y: 200, // Number，可選，節點位置的 y 值},{id: 'node2', // String，該節點存在則必須，節點的唯一標識x: 300, // Number，可選，節點位置的 x 值y: 200, // Number，可選，節點位置的 y 值},],// 邊集edges: [{source: 'node1', // String，必須，起始點 idtarget: 'node2', // String，必須，目標點 id},],};const graph = new G6.Graph({container: 'mountNode', // String | HTMLElement，必須，在 Step 1 中創建的容器 id 或容器本身width: 800, // Number，必須，圖的寬度height: 500, // Number，必須，圖的高度});graph.data(data); // 讀取 Step 2 中的數據源到圖上graph.render(); // 渲染圖 </script> </body> </html>總結
以上是生活随笔為你收集整理的G6 图可视化引擎——快速上手的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： G6 图可视化引擎——简介
- 下一篇： G6 图可视化引擎——入门教程——前言