G6 图可视化引擎——入门教程——元素及其配置
圖的元素特指圖上的節點 Node 和邊 Edge 。在上一章節中，我們已經將 Tutorial 案例的圖繪制了出來，但是各個元素及其 label 在視覺上很簡陋。本文通過將上一章節中簡陋的元素美化成如下效果，介紹元素的屬性、配置方法。
基本概念
圖的元素
圖的元素特指圖上的節點 Node 和邊 Edge 。G6 內置了一系列 內置的節點 和 內置的邊，供用戶自由選擇。G6 不同的內置節點或不同的內置邊主要區別在于元素的 圖形 Shape，例如，節點可以是圓形、矩形、圖片等。
元素的屬性
不論是節點還是邊，它們的屬性分為兩種：
- 樣式屬性 style：對應 Canvas 中的各種樣式，在元素狀態 State 發生變化時，可以被改變；
- 其他屬性：例如圖形類型（ type）、id（id ）一類在元素狀態 State 發生變化時不能被改變的屬性。
例如，G6 設定 hover 或 click 節點，造成節點狀態的改變，只能自動改變節點的樣式屬性（如 fill、stroke 等），其他屬性（如 type 等）不能被改變。如果需要改變其他屬性，要通過 graph.updateItem 手動配置。樣式屬性是一個名為 style 的對象， style 字段與其他屬性并行。
數據結構
以節點元素為例，其屬性的數據結構如下：
{id: 'node0', // 元素的 idtype: 'circle', // 元素的圖形size: 40, // 元素的大小label: 'node0' // 標簽文字labelCfg: { // 標簽配置屬性positions: 'center',// 標簽的屬性，標簽在元素中的位置style: { // 包裹標簽樣式屬性的字段 style 與標簽其他屬性在數據結構上并行fontSize: 12 // 標簽的樣式屬性，文字字體大小// ... // 標簽的其他樣式屬性}}// ..., // 其他屬性style: { // 包裹樣式屬性的字段 style 與其他屬性在數據結構上并行fill: '#000', // 樣式屬性，元素的填充色stroke: '#888', // 樣式屬性，元素的描邊色// ... // 其他樣式屬性} }邊元素的屬性數據結構與節點元素相似，只是其他屬性中多了 source 和 target 字段，代表起始和終止節點的 id。
細化在圖 1 中 Tutorial 案例 的視覺需求，我們需要完成：
- 視覺效果：
- R1: 節點的描邊和填充色，對應節點樣式屬性：fill，stroke；
- R2: 節點上標簽文本的顏色，對應節點其他屬性：labelCfg；
- R3: 邊的透明度和顏色，對應邊樣式屬性：opacity，stroke；
- R4: 邊上標簽文本的方向和顏色，對應邊其他屬性：labelCfg；
- 數據與視覺映射：
- R5: 根據數據中節點的 class 屬性映射節點的形狀，對應節點其他屬性：type；
- R6: 根據數據中邊的 weight 屬性映射邊的粗細，對應邊樣式屬性：lineWidth。
配置屬性
在 G6 中，根據不同的場景需求，有 7 種配置元素屬性的方式。這里，我們簡單介紹其中的兩種：
1. 實例化圖時全局配置
適用場景：所有節點統一的屬性配置，所有邊統一的屬性配置。
使用方式：使用圖的兩個配置項：
- defaultNode：節點在默認狀態下的樣式屬性（style）和其他屬性；
- defaultEdge：邊在默認狀態下的樣式屬性（style）和其他屬性。
?? 注意: 由于是統一的配置，不能根據數據中的屬性（如 class、weight）等值的不同進行個性化設置，因此只能滿足 R1、R2、R3、R4 需求。達到如下效果：
通過如下方式在實例化圖時 defaultNode 和 defaultEdge ，可以完成上圖效果：
const graph = new G6.Graph({// ... // 圖的其他配置// 節點在默認狀態下的樣式配置（style）和其他配置defaultNode: {size: 30, // 節點大小// ... // 節點的其他配置// 節點樣式配置style: {fill: 'steelblue', // 節點填充色stroke: '#666', // 節點描邊色lineWidth: 1, // 節點描邊粗細},// 節點上的標簽文本配置labelCfg: {// 節點上的標簽文本樣式配置style: {fill: '#fff', // 節點標簽文字顏色},},},// 邊在默認狀態下的樣式配置（style）和其他配置defaultEdge: {// ... // 邊的其他配置// 邊樣式配置style: {opacity: 0.6, // 邊透明度stroke: 'grey', // 邊描邊顏色},// 邊上的標簽文本配置labelCfg: {autoRotate: true, // 邊上的標簽文本根據邊的方向旋轉},}, });2. 在數據中配置
適用場景：不同節點/邊可以有不同的個性化配置。
因此，這種配置方式可以滿足 R5、R6 需求。
使用方式：可以直接將配置寫入數據文件；也可以在讀入數據后，通過遍歷的方式寫入配置。這里展示讀入數據后，通過遍歷的方式寫入配置。下面代碼展示了如何遍歷數據進行屬性的配置：
const nodes = remoteData.nodes; nodes.forEach(node => {if (!node.style) {node.style = {};}switch (node.class // 根據節點數據中的 class 屬性配置圖形) {case 'c0': {node.type = 'circle'; // class = 'c0' 時節點圖形為 circlebreak;}case 'c1': {node.type = 'rect'; // class = 'c1' 時節點圖形為 rectnode.size = [35, 20]; // class = 'c1' 時節點大小break;}case 'c2': {node.type = 'ellipse'; // class = 'c2' 時節點圖形為 ellipsenode.size = [35, 20]; // class = 'c2' 時節點大小break;}} });graph.data(remoteData);運行結果如下：
可以看到，圖中有一些節點被渲染成了矩形，還有一些被渲染成了橢圓形。除了設置 type 屬性之外，我們還覆蓋了上文全局配置的節點的 size 屬性，在矩形和橢圓的情況下，size 是一個數組；而在默認圓形的情況下，G6 將仍然讀取全局配置的 size 屬性為數字 30。也就是說，動態配置屬性讓我們既可以根據數據的不同配置不同的屬性值，也可以有能力覆蓋全局靜態的屬性值。
進一步地，我們嘗試根據數據的比重不同，配置不一樣邊的粗細：
// const nodes = ...// 遍歷邊數據 const edges = remoteData.edges; edges.forEach(edge => {if (!edge.style) {edge.style = {};}edge.style.lineWidth = edge.weight; // 邊的粗細映射邊數據中的 weight 屬性數值 });graph.data(remoteData);結果如下：
如圖所示，邊的粗細已經按照數據的比重成功渲染了出來，但是邊原有的樣式（透明度、顏色）卻丟失了。這是因為我們提到過動態配置屬性會覆蓋全局配置屬性，這里配置了 style.lineWidth，導致覆蓋了全局的 style 對象。解決辦法是將被覆蓋的邊的樣式都移到動態配置里面來：
完整代碼
至此，完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" /><title>Tutorial Demo</title> </head> <body> <div id="mountNode"></div> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js"></script> <script>const graph = new G6.Graph({container: 'mountNode',width: 800,height: 600,fitView: true,fitViewPadding: [20, 40, 50, 20],defaultNode: {size: 30,labelCfg: {style: {fill: '#fff',},},},defaultEdge: {labelCfg: {autoRotate: true,},},});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();const nodes = remoteData.nodes;const edges = remoteData.edges;nodes.forEach(node => {if (!node.style) {node.style = {};}node.style.lineWidth = 1;node.style.stroke = '#666';node.style.fill = 'steelblue';switch (node.class) {case 'c0': {node.type = 'circle';break;}case 'c1': {node.type = 'rect';node.size = [35, 20];break;}case 'c2': {node.type = 'ellipse';node.size = [35, 20];break;}}});edges.forEach(edge => {if (!edge.style) {edge.style = {};}edge.style.lineWidth = edge.weight;edge.style.opacity = 0.6;edge.style.stroke = 'grey';});graph.data(remoteData);graph.render();};main(); </script> </body> </html>總結
以上是生活随笔為你收集整理的G6 图可视化引擎——入门教程——元素及其配置的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 16. 3Sum Closest 最接近
- 下一篇： G6 图可视化引擎——入门教程——使用图