前言

G6官方地址：https://antv-g6.gitee.io/zh/examples/gallery

參考的G6案例有： 圖表決策、邊動畫、定制不同節點的參數

實現的效果：動畫、放大、縮小、拖拽、移動、點擊交互等

有兩版代碼：一個是可以在G6官網里運行的。一個是在angular里運行的

我暫時未處理的問題：圖的適配問題，不能隨著屏幕大小變化而變化

變形

改變連接節點就行

代碼

可直接在官網上運行的代碼：
ps：隨便找一個案例，替換掉里面的代碼就行

import G6 from '@antv/g6';G6.registerEdge('circle-running',{afterDraw(cfg, group) {// 得到組中的第一個形狀，它是邊的路徑在這里const shape = group.get('children')[0];// 邊緣路徑的起始位置const startPoint = shape.getPoint(0);// 添加一個在線上運動的圓球const circle = group.addShape('circle', {attrs: {x: startPoint.x,y: startPoint.y,fill: '#1890ff',r: 3,},name: 'circle-shape',});// 小球的動畫circle.animate((ratio) => {// 每個幀的操作。比率范圍從0到1，表示動畫的進度。返回修改后的配置// 根據比例得到邊緣的位置const tmpPoint = shape.getPoint(ratio);// 這里返回修改后的配置，這里是x和yreturn {x: tmpPoint.x,y: tmpPoint.y,};},{repeat: true, // 是否重復執行動畫duration: 3000, // 執行一次的持續時間},);},},'line', // 擴展內置邊'cubic' );const lightColors = ['#8FE9FF','#87EAEF','#FFC9E3','#A7C2FF','#FFA1E3','#FFE269','#BFCFEE','#FFA0C5','#D5FF86', ]; const darkColors = ['#7DA8FF','#44E6C1','#FF68A7','#7F86FF','#AE6CFF','#FF5A34','#5D7092','#FF6565','#6BFFDE', ]; const uLightColors = ['#CFF6FF','#BCFCFF','#FFECF5','#ECFBFF','#EAD9FF','#FFF8DA','#DCE2EE','#FFE7F0','#EEFFCE', ]; const uDarkColors = ['#CADBFF','#A9FFEB','#FFC4DD','#CACDFF','#FFD4F2','#FFD3C9','#EBF2FF','#FFCBCB','#CAFFF3', ];const gColors = []; const unlightColorMap = new Map();const container = document.getElementById('container'); const width = container.scrollWidth; const height = container.scrollHeight || 500; const graph = new G6.Graph({container: 'container',width,height,defaultEdge: {type: 'circle-running',style: {lineWidth: 2,stroke: '#bae7ff',},},defaultNode: {type: 'circle', // 'bubble'size: 95,labelCfg: {position: 'center',style: {fill: 'white',fontStyle: 'bold',},},},animate: true,layout: {type: 'force',preventOverlap: true,linkDistance: (d) => {if (d.source.id === 'node0') {return 200;}return 30;},nodeStrength: (d) => {if (d.isLeaf) {return -200;}return -100;},},defaultNode: {color: '#5B8FF9',},// 整個圖可以拖動、放大縮小modes: {default: ['drag-canvas', 'zoom-canvas'],}, });const data = {nodes: [{ id: 'node0', label: `組織管理\n(12)`, size: 100 },{ id: 'node1', label: '管理單位', size: 100 },{ id: 'node2', label: '角色管理', size: 100 },{ id: 'node3', label: '崗位管理', size: 100 },{ id: 'node4', label: '崗位管理', size: 100 },{ id: 'node5', label: '崗位管理', size: 100 },],edges: [{ source: 'node0', target: 'node1' },{ source: 'node0', target: 'node2' },{ source: 'node0', target: 'node3' },{ source: 'node0', target: 'node4' },{ source: 'node0', target: 'node5' },], };lightColors.forEach((lcolor, i) => {gColors.push('l(0) 0:' + lcolor + ' 1:' + darkColors[i]);unlightColorMap.set(gColors[i], 'l(0) 0:' + uLightColors[i] + ' 1:' + uDarkColors[i]); }); console.log(gColors);for ( let i = 0; i < data.nodes.length; i++ ) {data.nodes[i].color = gColors[i];data.nodes[i].style = {fill: gColors[i],lineWidth: 0};data.nodes[i].labelCfg = {style: {fontSize: 20,fill: '#fff',fontWeight: 300,},}; }const nodes = data.nodes; graph.data({nodes,edges: data.edges.map(function (edge, i) {edge.id = 'edge' + i;return Object.assign({}, edge);}), }); graph.render();graph.on('node:dragstart', function (e) {graph.layout();refreshDragedNodePosition(e); }); graph.on('node:drag', function (e) {refreshDragedNodePosition(e); }); graph.on('node:dragend', function (e) {e.item.get('model').fx = null;e.item.get('model').fy = null; }); graph.on('node:click', (evt) => {window.alert('點擊了');});if (typeof window !== 'undefined')window.onresize = () => {if (!graph || graph.get('destroyed')) return;if (!container || !container.scrollWidth || !container.scrollHeight) return;graph.changeSize(container.scrollWidth, container.scrollHeight);};function refreshDragedNodePosition(e) {const model = e.item.get('model');model.fx = e.x;model.fy = e.y; }

我的代碼

我是在angular11里使用的G6

<div #mountNodeLeft></div> import { Component, OnInit, ViewChild } from '@angular/core';@ViewChild('mountNodeLeft', { static: false }) mountNodeLeft!: any;constructor() { }ngOnInit(): void {}// tslint:disable-next-line:use-lifecycle-interfacengAfterViewInit(): void {setTimeout(() => { this.render(); }, 100);}// 下面兩個函數是g6的圖// tslint:disable-next-line:typedefrender() {const lightColors = ['#8FE9FF','#87EAEF','#FFC9E3','#A7C2FF','#FFA1E3','#FFE269','#BFCFEE','#FFA0C5','#D5FF86',];const darkColors = ['#7DA8FF','#44E6C1','#FF68A7','#7F86FF','#AE6CFF','#FF5A34','#5D7092','#FF6565','#6BFFDE',];const uLightColors = ['#CFF6FF','#BCFCFF','#FFECF5','#ECFBFF','#EAD9FF','#FFF8DA','#DCE2EE','#FFE7F0','#EEFFCE',];const uDarkColors = ['#CADBFF','#A9FFEB','#FFC4DD','#CACDFF','#FFD4F2','#FFD3C9','#EBF2FF','#FFCBCB','#CAFFF3',];const gColors: any = [];const unlightColorMap = new Map();lightColors.forEach((lcolor, i) => {gColors.push('l(0) 0:' + lcolor + ' 1:' + darkColors[i]);unlightColorMap.set(gColors[i], 'l(0) 0:' + uLightColors[i] + ' 1:' + uDarkColors[i]);});G6.registerEdge('circle-running',{// tslint:disable-next-line:typedefafterDraw(cfg, group: any) {// 得到組中的第一個形狀，它是邊的路徑在這里const shape = group.get('children')[0];// 邊緣路徑的起始位置const startPoint = shape.getPoint(0);// 添加一個在線上運動的圓球const circle = group.addShape('circle', {attrs: {x: startPoint.x,y: startPoint.y,fill: '#1890ff',r: 3,},name: 'circle-shape',});// 小球的動畫circle.animate((ratio: any) => {// 每個幀的操作。比率范圍從0到1，表示動畫的進度。返回修改后的配置// 根據比例得到邊緣的位置const tmpPoint = shape.getPoint(ratio);// 這里返回修改后的配置，這里是x和yreturn {x: tmpPoint.x,y: tmpPoint.y,};},{repeat: true, // 是否重復執行動畫duration: 3000, // 執行一次的持續時間},);},},'line', // 擴展內置邊'cubic');const width = window.innerWidth / 2;const height = window.innerHeight - 300;const graph = new G6.Graph({container: this.mountNodeLeft.nativeElement,width,height,// 改變線的顏色 綁定動畫defaultEdge: {type: 'circle-running',style: {lineWidth: 2,stroke: '#bae7ff',},},layout: {type: 'force',preventOverlap: true,linkDistance: (d: any) => {// if (d.source.id === 'node0') {// return 200;// }// return 30;return 200;},// nodeStrength: (d: any) => {// if (d.isLeaf) {// return -200;// }// return -100;},},defaultNode: {color: '#5B8FF9',},// 整個圖可以拖動、放大縮小modes: {default: ['drag-canvas', 'zoom-canvas'],},});const data: any = {nodes: [{ id: 'node0', label: `組織管理\n(12)`, size: 110 },{ id: 'node1', label: '管理單位', size: 110 },{ id: 'node2', label: '角色管理', size: 110 },{ id: 'node3', label: '崗位管理', size: 110 },{ id: 'node4', label: '崗位管理', size: 110 },{ id: 'node5', label: '崗位管理', size: 110 },],edges: [{ source: 'node0', target: 'node1' },{ source: 'node0', target: 'node2' },{ source: 'node0', target: 'node3' },{ source: 'node0', target: 'node4' },{ source: 'node0', target: 'node5' },],};// 修改圖中的圓for (let i = 0; i < data.nodes.length; i++) {data.nodes[i].color = gColors[i];data.nodes[i].style = {fill: gColors[i],lineWidth: 0,cursor: 'pointer',};data.nodes[i].labelCfg = {style: {fontSize: 18,fill: '#fff',fontWeight: 300,cursor: 'pointer',},};}const nodes = data.nodes;graph.data({nodes,edges: data.edges.map((edge: any, i: any) => {edge.id = 'edge' + i;return Object.assign({}, edge);}),});graph.render();graph.on('node:dragstart', (e) => {graph.layout();this.refreshDragedNodePosition(e);});graph.on('node:drag', (e) => {this.refreshDragedNodePosition(e);});graph.on('node:dragend', (e: any) => {e.item.get('model').fx = null;e.item.get('model').fy = null;});graph.on('node:click', (evt) => {window.alert('點擊了');});}// tslint:disable-next-line:typedefrefreshDragedNodePosition(e: any) {const model = e.item.get('model');model.fx = e.x;model.fy = e.y;}

總結

以上是生活随笔為你收集整理的G6-定制不同节点的参数 --组合图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。