专业网站运营西安seo高手
使用antv g6实现拓扑图
- 安装antv g6
- 创建一个 div，并制定必须的属性 id
- 定义初始化方法
- 定义node节点数据
- 将获取到的数据渲染进页面
安装antv g6
npm install @antv/g6 --save
import G6 from '@antv/g6';
创建一个 div，并制定必须的属性 id
定义好展示id，通过id获取dom数据
<div id="container" style="width: 100%;height: 800px"></div>
定义初始化方法
init() {const container = document.getElementById('container');//获取拓扑图的宽高const width = container.scrollWidth;const height = container.scrollHeight || 700;this.graph = new G6.Graph({// 使用 contextMenu plugins 时，需要将 container 设置为 position: relative;container: 'container',width,height,fitCenter: true,renderer: 'svg',linkCenter: true,// layout: {// type: 'dagre',// rankdir: 'LR', // 可选，默认为图的中心// align: 'DL', // 可选// nodesep: 20, // 可选// ranksep: 50, // 可选// controlPoints: true, // 可选// },//以中心为原点展示数据layout: {type: 'radial',// center: [ width/2, 400 ], // 可选，默认为图的中心linkDistance: 400, // 可选，边长maxIteration: 1000, // 可选unitRadius: 250, // 可选preventOverlap: true, // 可选，必须配合 nodeSizenodeSize: 300, // 可选strictRadial: true, // 可选sortBy: 'data',sortStrength: 150// workerEnabled: true // 可选，开启 web-worker},modes: {default: ['drag-canvas', 'drag-node', 'zoom-canvas'],},//设置node样式defaultNode: {type: 'image',size: 80,x: 760,y: 100,labelCfg: {fontsize: 20,style: {fontsize: 20}}},//设置线条的样式defaultEdge: {type: 'line',style: {startArrow: {path: G6.Arrow.vee(10, 12),d: 70,fill: '#f00',},stroke: '#5B8FF9',lineDash: [6, 3],},labelCfg: {refY: 15,// refX: 60,}}});//定义拓扑图节点的点击事件this.graph.on('node:click', (e) => {let item = e.item;let model = item.getModel();});},
定义node节点数据
let nodes =[{id:1,label: 第一个node,img: require('@/assets/img/icon-case.png'),//自定义node数据},{id:2,label: 第二个node,img: require('@/assets/img/icon-case.png'),//自定义node数据}
]
#定义edge数据
let edges = [{source: 1,target: 2,label: '关系'}
]
将获取到的数据渲染进页面
mounted() {this.init();let data = {nodes: nodes,edges: edges}this.graph.data(data);this.graph.render();},