G6 图可视化引擎——入门教程——前言
什么是 G6
G6 是一個圖可視化引擎。它提供了圖的繪制、布局、分析、交互、動畫等基礎(chǔ)的圖可視化能力。旨在讓關(guān)系變得透明，簡單。讓用戶獲得關(guān)系數(shù)據(jù)的 Insight。
入門教程簡介
我們在本入門教程中將會完成一個如下圖所示簡單的圖可視化，我們將在后文中稱其為 Tutorial 案例，完整代碼。
前言
我們將會通過本入門教程完成包含圖的創(chuàng)建、渲染、元素的配置、布局、交互、動畫、工具的最終的 Tutorial 案例。在這部分教學(xué)中，讀者將會學(xué)習(xí)到 G6 中基礎(chǔ)和核心的功能。掌握該入門教程內(nèi)容后，可以幫助讀者初步理解 G6 并為深度理解 G6 打好基礎(chǔ)。
該入門教程將會劃分為以下幾個章節(jié)：
- 快速上手
- 創(chuàng)建圖
- 元素及其配置
- 使用圖布局 Layout
- 圖的交互 Behavior
- 插件 & 工具
- *動畫（選讀）
基礎(chǔ)知識
本教程展示如何使用 G6 創(chuàng)建一個完整的圖可視化應(yīng)用。在學(xué)習(xí)之前，我們假設(shè)讀者對 HTML 和 JavaScript 有所了解，但并不要求對 G6 有任何的基礎(chǔ)。如果讀者對 G6 的基本內(nèi)容已經(jīng)熟知，可以適當(dāng)跳過部分內(nèi)容，有針對性地閱讀重要的知識點。
環(huán)境準(zhǔn)備
建議使用新版的 Chrome 瀏覽器作為運行環(huán)境，用任意的代碼編輯器進(jìn)行代碼的編寫即可。本教程默認(rèn)采用 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 已成功引入。
總結(jié)
以上是生活随笔為你收集整理的G6 图可视化引擎——入门教程——前言的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： G6 图可视化引擎——快速上手
- 下一篇： G6 图可视化引擎——入门教程——绘制