G6 图可视化引擎——入门教程——前言
生活随笔
收集整理的這篇文章主要介紹了
G6 图可视化引擎——入门教程——前言
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
什么是 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 已成功引入。
總結
以上是生活随笔為你收集整理的G6 图可视化引擎——入门教程——前言的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： G6 图可视化引擎——快速上手
- 下一篇： G6 图可视化引擎——入门教程——绘制