G6 是一個(gè)圖可視化引擎。它提供了圖的繪制鬓梅、布局供置、分析、交互绽快、動(dòng)畫等圖可視化的基礎(chǔ)能力芥丧。旨在讓關(guān)系變得透明，簡單坊罢。讓用戶獲得關(guān)系數(shù)據(jù)的 Insight续担。
翻譯成白話： G6可以實(shí)現(xiàn) 拓?fù)鋱D、流程圖活孩、腦圖 等各種奇奇怪怪的圖表的開發(fā)物遇，并在瀏覽器呈現(xiàn)出來。
開發(fā)環(huán)境
- chrome ^88.0.4324.104（正式版本）
- vue ^2.6.11
- g6 ^4.1.11
請認(rèn)清本文所使用的開發(fā)環(huán)境憾儒。本例使用 Vue2 進(jìn)行開發(fā)Ｑ恕！起趾！
如果在練習(xí)中所使用到的庫或?yàn)g覽器版本與文本不一致诗舰，可能會(huì)出現(xiàn)某些功能無法實(shí)現(xiàn)。
本文的運(yùn)行環(huán)境是 chrome 瀏覽器训裆，如果在其他瀏覽器出現(xiàn)兼容問題眶根，可以留言一起探討一起解決蜀铲。
學(xué)前準(zhǔn)備
- 有一定的
html和css基礎(chǔ)，本文不講解這方面的基礎(chǔ)知識(shí)汛闸。 - 有一定的
vue 2開發(fā)經(jīng)驗(yàn)蝙茶，本文不會(huì)講解vue基礎(chǔ)用法。 - 建議有
canvas基礎(chǔ)（沒有也沒關(guān)系）诸老。
本文使用 vue-cli 進(jìn)行開發(fā)隆夯，所以會(huì)使用 npm 的方式安裝 G6 。
快速上手
1别伏、安裝
CDN 的方式很簡單蹄衷，可以自行看文檔。
本文使用 vue-cli 進(jìn)行開發(fā)厘肮，所以會(huì)使用 npm 的方式安裝 G6 愧口。
這里默認(rèn)讀者已經(jīng)使用 vue-cli 創(chuàng)建好一個(gè) vue 2 的項(xiàng)目了。
進(jìn)入創(chuàng)建好的 vue 項(xiàng)目类茂，在終端輸入以下命令進(jìn)行安裝：
$ npm install --save @antv/g6
$ 號(hào)不需要輸入耍属， $ 號(hào)代表命令。
安裝成功后可以在 node_modules 目錄查看到：在@antv 目錄下找到 g6 目錄巩检，證明安裝成功了厚骗。
2、代碼+注釋
根據(jù)官方文檔提示兢哭，要快速創(chuàng)建圖表只需5大步驟领舰。
- 創(chuàng)建容器
- 引入G6
- 準(zhǔn)備數(shù)據(jù)
- 創(chuàng)建關(guān)系圖
- 匹配數(shù)據(jù)源并渲染
以上步驟，會(huì)在代碼中以“【步驟xxx】”的注釋方式一一對應(yīng)迟螺。
<template>
<div class="page-x">
<!-- 【步驟1】 創(chuàng)建容器 -->
<div class="g6-x" id="containerG6" ref="containerG6"></div>
</div>
</template>
<script>
// 【步驟2】 引入G6
import G6 from '@antv/g6'
export default {
name: "Started",
data() {
return {
graph: null,
// 【步驟3】 準(zhǔn)備數(shù)據(jù)
graphData: {
// 點(diǎn)集
nodes: [
{
id: "node1", // String冲秽，該節(jié)點(diǎn)存在則必須，節(jié)點(diǎn)的唯一標(biāo)識(shí)
x: 100, // Number矩父，可選锉桑，節(jié)點(diǎn)位置的 x 值
y: 200 // Number，可選窍株，節(jié)點(diǎn)位置的 y 值
},
{
id: "node2", // String刨仑，該節(jié)點(diǎn)存在則必須，節(jié)點(diǎn)的唯一標(biāo)識(shí)
x: 300, // Number夹姥，可選，節(jié)點(diǎn)位置的 x 值
y: 200 // Number辙诞，可選辙售，節(jié)點(diǎn)位置的 y 值
}
],
// 邊集
edges: [
{
source: "node1", // String，必須飞涂，起始點(diǎn) id
target: "node2" // String旦部，必須祈搜，目標(biāo)點(diǎn) id
},
]
}
}
},
methods: {
// 初始化關(guān)系圖，并渲染數(shù)據(jù)
initGraph() {
// 【步驟4】 創(chuàng)建關(guān)系圖
const containerG6 = this.$refs.containerG6 // 獲取容器（DOM元素）
this.graph = new G6.Graph({
container: containerG6, // String | HTMLElement士八，必須容燕，在 Step 1 中創(chuàng)建的容器 id 或容器本身
width: containerG6.offsetWidth, // Number，必須婚度，圖的寬度
height: containerG6.offsetHeight // Number蘸秘，必須，圖的高度
})
// 【步驟5】 匹配數(shù)據(jù)源并渲染
this.graph.data(this.graphData) // 讀取 Step 2 中的數(shù)據(jù)源到圖上
this.graph.render() // 渲染圖
}
},
mounted() {
this.initGraph()
}
};
</script>
<style scoped>
.g6-x {
width: 800px;
height: 500px;
box-sizing: border-box;
border: 1px solid #ccc;
margin-left: 20px;
}
</style>
效果如下圖所示
這個(gè)案例參考了官方的起步案例蝗茁。
步驟3 的數(shù)據(jù)中醋虏，主要用到 nodes 和 edges 。
nodes 是所有點(diǎn)的集合哮翘，是數(shù)據(jù)類型颈嚼。每個(gè)點(diǎn)都需要有一個(gè) id 屬性，且 id 是唯一的饭寺。
nodes 里的 x 和 y 代表該點(diǎn)在畫布中的位置阻课。
本例的 edges 是依賴于 nodes 的。
edges 是所有邊的集合艰匙，是數(shù)組類型限煞。需要畫多少條邊就有多少個(gè)對象元素。
每條邊需要一個(gè) source 和 一個(gè) target旬薯。
source 是指 起始點(diǎn)晰骑，值是 起始點(diǎn) 的 id 。
target 是指 目標(biāo)點(diǎn)绊序，值是 目標(biāo)點(diǎn) 的 id 硕舆。
步驟4 使用 new G6.Graph 創(chuàng)建關(guān)系圖。
其中 container骤公、width 和 height 是必填項(xiàng)抚官。如果沒填這幾項(xiàng)會(huì)報(bào)錯(cuò)。
container 是容器的 id 或者容器實(shí)例阶捆。本例使用 vue 2 開發(fā)凌节，所以使用了 $refs 獲取容器實(shí)例（本例中容器實(shí)例為 containerG6）。
width 是圖的寬度洒试，本例使用了 containerG6.offsetWidth 倍奢，讓容器的寬度作為圖的寬度。
height 是圖的高度垒棋，本例使用了 `containerG6.offsetHeight卒煞，讓容器的高度作為圖的高度。
步驟5
使用 graph.data() 來初始化圖數(shù)據(jù)叼架。傳入的參數(shù)就是 步驟2 中準(zhǔn)備的數(shù)據(jù)畔裕。
使用 graph.render() 方法把數(shù)據(jù)渲染出來衣撬。
3、源碼地址
這個(gè)項(xiàng)目里還是用了 vue-router 進(jìn)行開發(fā)扮饶，但 vue-router 部分不會(huì)影響 G6 的使用具练。
