G6 图可视化引擎——入门教程——绘制 Tutorial 案例
本文將進(jìn)行 Tutorial 案例的簡(jiǎn)單繪制和配置。通過(guò)本文，你將知道創(chuàng)建一般圖時(shí)一些常用的配置項(xiàng)及其作用。
基礎(chǔ)繪制
創(chuàng)建容器
需要在 HTML 中創(chuàng)建一個(gè)用于容納 G6 繪制的圖的容器，通常為 div 標(biāo)簽。G6 在繪制時(shí)會(huì)在該容器下追加 canvas 標(biāo)簽，然后將圖繪制在其中。
<body><div id="mountNode"></div><!-- 引入 G6 --><!-- ... --> </body>數(shù)據(jù)準(zhǔn)備
引入 G6 的數(shù)據(jù)源為 JSON 格式的對(duì)象。該對(duì)象中需要有節(jié)點(diǎn)（nodes）和邊（edges）字段，分別用數(shù)組表示：
<script>// console.log(G6.Global.version);const initData = {// 點(diǎn)集nodes: [{id: 'node1', // 節(jié)點(diǎn)的唯一標(biāo)識(shí)x: 100, // 節(jié)點(diǎn)橫坐標(biāo)y: 200, // 節(jié)點(diǎn)縱坐標(biāo)label: '起始點(diǎn)', // 節(jié)點(diǎn)文本},{id: 'node2',x: 300,y: 200,label: '目標(biāo)點(diǎn)',},],// 邊集edges: [// 表示一條從 node1 節(jié)點(diǎn)連接到 node2 節(jié)點(diǎn)的邊{source: 'node1', // 起始點(diǎn) idtarget: 'node2', // 目標(biāo)點(diǎn) idlabel: '我是連線', // 邊的文本},],}; </script>?? 注意:
- nodes 數(shù)組中包含節(jié)點(diǎn)對(duì)象，唯一的 id 是每個(gè)節(jié)點(diǎn)對(duì)象中必要的屬性，x、 y 用于定位；
- edges 數(shù)組中包含邊對(duì)象，source 和 target 是每條邊的必要屬性，分別代表了該邊的起始點(diǎn) id 與 目標(biāo)點(diǎn) id。
圖實(shí)例化
圖實(shí)例化時(shí)，至少需要為圖設(shè)置容器、寬、高：
<script>// const initData = { ... }const graph = new G6.Graph({container: 'mountNode', // 指定掛載容器width: 800, // 圖的寬度height: 500, // 圖的高度}); </script>圖的渲染
數(shù)據(jù)的加載和圖的渲染是兩個(gè)步驟，可以分開(kāi)進(jìn)行。
<script>// const initData = { ... }// const graph = ...graph.data(initData); // 加載數(shù)據(jù)graph.render(); // 渲染 </script>繪制結(jié)果
調(diào)用 graph.render() 方法之后，G6 引擎會(huì)根據(jù)加載的數(shù)據(jù)進(jìn)行圖的繪制。結(jié)果如下：
真實(shí)數(shù)據(jù)加載
上文中，我們使用了僅含有兩個(gè)節(jié)點(diǎn)和一條邊的數(shù)據(jù)，直接將數(shù)據(jù)定義放在了代碼中。而真實(shí)場(chǎng)景的數(shù)據(jù)通常是遠(yuǎn)程接口請(qǐng)求加載的。為了方便，我們已經(jīng)給讀者準(zhǔn)備好了一份 JSON 數(shù)據(jù)文件，地址如下：
https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json
加載遠(yuǎn)程數(shù)據(jù)
修改 index.html，通過(guò) fetch 函數(shù)異步加載遠(yuǎn)程的數(shù)據(jù)源，并傳入 G6 的圖實(shí)例中：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>02.繪制 Tutorial 案例</title> </head> <body> <div id="mountNode"></div><script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.3.1/dist/g6.min.js"></script> <script>const graph = new G6.Graph({container: 'mountNode', // 指定掛載容器width: 800, // 圖的寬度height: 500, // 圖的高度});const main = async () => {const response = await fetch('https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json',);const remoteData = await response.json();graph.data(remoteData); // 加載遠(yuǎn)程數(shù)據(jù)graph.render(); // 渲染};main(); </script> </body> </html>fetch 函數(shù)允許我們發(fā)起網(wǎng)絡(luò)請(qǐng)求，加載數(shù)據(jù)，而其異步的過(guò)程可以通過(guò) async/await 進(jìn)行更合理的控制。這里我們?yōu)榱朔奖闫鹨?jiàn)，將主要邏輯放在了 main 函數(shù)里面。
運(yùn)行后，我們得到了下圖結(jié)果：
乍看之下，圖像有點(diǎn)奇怪，實(shí)際上數(shù)據(jù)已經(jīng)正確的加載了進(jìn)來(lái)。由于數(shù)據(jù)量比較大，節(jié)點(diǎn)和邊都非常的多，顯得內(nèi)容比較雜亂。另外由于畫(huà)布大小的限制，實(shí)際的圖被畫(huà)布截?cái)嗔?#xff0c;目前只能看見(jiàn)部分內(nèi)容，這個(gè)問(wèn)題后文會(huì)繼續(xù)解決。
請(qǐng)看下面摘取自 tutorial-data.json 的部分?jǐn)?shù)據(jù)，我們發(fā)現(xiàn)數(shù)據(jù)中節(jié)點(diǎn)定義了位置信息 x 與 y，并且很多節(jié)點(diǎn)的 x 和 y 不在圖的寬高（width: 800, height: 600）范圍內(nèi)：
{"nodes": [{ "id": "0", "label": "n0", "class": "c0", "x": 1000, "y": -100 },{ "id": "1", "label": "n1", "class": "c0", "x": 300, "y": -10 }//...],"edges": [//...] }由于 G6 在讀取數(shù)據(jù)時(shí)，發(fā)現(xiàn)了數(shù)據(jù)中帶有位置信息（x 和 y），就會(huì)按照該位置信息進(jìn)行繪制，這是為了滿足按照原始數(shù)據(jù)繪制的需求設(shè)計(jì)的。但為優(yōu)化超出屏幕到問(wèn)題，G6 提供了圖的兩個(gè)相關(guān)配置項(xiàng)：
- fitView：設(shè)置是否將圖適配到畫(huà)布中；
- fitViewPadding：畫(huà)布上四周的留白寬度。
我們將實(shí)例化圖的代碼更改為如下形式：
const graph = new G6.Graph({container: 'mountNode', // 指定掛載容器width: 800, // 圖的寬度height: 500, // 圖的高度fitView: true,fitViewPadding: [20, 40, 50, 20], });上述代碼將會(huì)生成如下圖：
可以看到，圖像已經(jīng)可以自動(dòng)適配畫(huà)布的大小，完整的顯示了出來(lái)。
常用配置
本文使用到的配置以及后續(xù) Tutorial 將會(huì)使用到到常用配置如下：
| fitView | Boolean | true / false | false | 是否將圖適配到畫(huà)布大小，可以防止超出畫(huà)布或留白太多。 |
| fitViewPadding | Number / Array | 20 / [ 20, 40, 50, 20 ] | 0 | 畫(huà)布上的四周留白寬度。 |
| animate | Boolean | true / false | false | 是否啟用圖的動(dòng)畫(huà)。 |
| modes | Object | { ? default: [ 'drag-node', 'drag-canvas' ] } | null | 圖上行為模式的集合。由于比較復(fù)雜，按需參見(jiàn)：G6 中的 Mode 教程。 |
| defaultNode | Object | { ? type: 'circle', ? color: '#000', ? style: { ? ? ...... ? } } | null | 節(jié)點(diǎn)默認(rèn)的屬性，包括節(jié)點(diǎn)的一般屬性和樣式屬性（style）。 |
| defaultEdge | Object | { ? type: 'polyline', ? color: '#000', ? style: { ? ? ...... ? } } | null | 邊默認(rèn)的屬性，包括邊的一般屬性和樣式屬性（style）。 |
| nodeStateStyles | Object | { ? hover: { ? ? ...... ? }, ? select: { ? ? ...... ? } } | null | 節(jié)點(diǎn)在除默認(rèn)狀態(tài)外，其他狀態(tài)下的樣式屬性（style）。例如鼠標(biāo)放置（hover）、選中（select）等狀態(tài)。 |
| edgeStateStyles | Object | { ? hover: { ? ? ...... ? }, ? select: { ? ? ...... ? } } | null | 邊在除默認(rèn)狀態(tài)外，其他狀態(tài)下的樣式屬性（style）。例如鼠標(biāo)放置（hover）、選中（select）等狀態(tài)。 |
總結(jié)
以上是生活随笔為你收集整理的G6 图可视化引擎——入门教程——绘制 Tutorial 案例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： G6 图可视化引擎——入门教程——前言
- 下一篇： 16. 3Sum Closest 最接近