g6是一个很棒的可视化工具
目前支持开发者搭建属于自己的图，图分析、图应用、图编辑器
图编辑器可以支持多种图例的创建
最近一直在被G6可视化工具困扰，在逐渐摸索过程中，慢慢可以进行简单图例的搭建
以下，根据react中如何使用G6来写这篇文章
----Go
整体项目使用es6模块化开发
首先下载G6
npm install @antv/g6 --save
import React from 'react';
import G6 from '@antv/g6';
class G6 extends React.Component {
constructor(props) {
super(props);
this.state={
};
}
componentDidMount() {
// dom 已经渲染完成时加载图片, G6渲染依赖根节点
this.renderG6();
}
renderG6 = () => {
// 渲染图所需数据
const data = {
nodes: [{
id: 'node1',
shape: 'customNode',
x: 100,
y: 200
},{
id: 'node2',
x: 300,
y: 200
}],
edges: [{
id: 'edge1',
target: 'node2',
source: 'node1'
}]
};
// 初始化G6图
const graph = new G6.Graph({
container: 'mountNode',
width: 600,
height: 300
});
// Graph 是最基础的图类, G6 技术栈中所有关系图都是由该类负责绘制
// 读数据
graph.read(data);
}
render() {
return (
<div id="mountNode"></div>
)
}
}
G6.registerNode('customNode', {
draw(item){
// draw 是图项最终绘制的接口， 可以拿到shape为customNode的所有数据
const group = item.getGraphicGroup(); // 获取 G (图形库) 的图形图组
const model = item.getModel();
// 图形数据
return group.addShape('rect', {
attrs: {
x: 0,
y: 0,
width: 100,
height: 100,
stroke: 'red'
}
anchor: array || object || callback
<!-- anchor: [
[0.5, 1], // 底边中点
[0.5, 0], // 上边中点
[1, 0], // 左边中点
[1, 0.5], // 右边中点
], -->
});
}
}, '基于某种图形进行绘制的类型');
先下班。。。。。。