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 已成功引入。
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章