什麼是 G6
G6 是一個圖可視化引擎。它提供了圖的繪製、佈局、分析、交互、動畫等基礎的圖可視化能力。旨在讓關係變得透明,簡單。讓用戶獲得關係數據的 Insight。
入門教程簡介
我們在本入門教程中將會完成一個如下圖所示簡單的圖可視化,我們將在後文中稱其爲 Tutorial 案例,完整代碼。
前言
我們將會通過本入門教程完成包含圖的創建、渲染、元素的配置、佈局、交互、動畫、工具的最終的 Tutorial 案例。在這部分教學中,讀者將會學習到 G6 中基礎和核心的功能。掌握該入門教程內容後,可以幫助讀者初步理解 G6 併爲深度理解 G6 打好基礎。
該入門教程將會劃分爲以下幾個章節:
- 快速上手
- 創建圖
- 元素及其配置
- 使用圖佈局 Layout
- 圖的交互 Behavior
- 插件 & 工具
- *動畫(選讀)
基礎知識
本教程展示如何使用 G6 創建一個完整的圖可視化應用。在學習之前,我們假設讀者對 HTML 和 JavaScript 有所瞭解,但並不要求對 G6 有任何的基礎。如果讀者對 G6 的基本內容已經熟知,可以適當跳過部分內容,有針對性地閱讀重要的知識點。
環境準備
建議使用新版的 Chrome 瀏覽器作爲運行環境,用任意的代碼編輯器進行代碼的編寫即可。本教程默認採用 CDN 的方式直接引入 G6 類庫,引入的版本是 3.3.1,此版本很多特性會大大簡化我們的代碼。
新建 index.html 文件,並添加如下代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tutorial Demo</title>
</head>
<body>
<!-- 引入 G6 -->
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.3.1/dist/g6.min.js"></script>
<script>
console.log(G6.Global.version);
</script>
</body>
</html>
使用瀏覽器打開 index.html 文件,打開控制檯,可以看到 G6 的版本號,說明 G6 已成功引入。