在 React 中使用 G6，和在 HTML 中使用基本相同，唯一比较关键的区分就是在实例化 Graph 时，要保证 DOM 容器渲染完成，并能获取到 DOM 元素。
效果图（来源官网）：
功能以及实现：
- 定义节点
- 定义边
- 节点以及边的tooltip
- 元素的使用
- 特效
在 React 中，通过 ref.current获取到真实的 DOM 元素，也可通过DOM获取（不建议）！
引入：
import G6 from '@antv/g6';
定义节点：（属性介绍代码下面👇）
/**
* 初始化元素-注册节点
*/
const initChartNode = () => {
G6.registerNode('tree-node', {
draw: function drawShape(cfg, group) {
const rect = group.addShape('rect', {
attrs: {
fill: '#67b585',
width: 20, // 矩形的宽度。
height: 10, // 矩形的高度。
radius: [2], // 节点圆角
nodeConfigId: cfg.nodeConfigId,
},
name: 'rect-shape',
});
const content = cfg.nodeConfigName;
const text = group.addShape('text', {
attrs: {
// text: content,
text: content,
x: 0,
y: 0,
fontSize: 10, // 字体大小。
fontWeight: 400, // 字体粗细。
textAlign: 'left', // 设置文本内容的当前对齐方式。center / end / left / right / start
textBaseline: 'middle', // 设置在绘制文本时使用的当前文本基线。
// shadowBlur: 10, // 阴影模糊
fill: '#deefe6',
cursor: 'pointer',
},
name: 'text-shape',
});
const bbox = text.getBBox();
const hasChildren = cfg.children;
rect.attr({
x: -bbox.width / 2 - 4,
y: -bbox.height / 2 - 6,
width: bbox.width + 12,
height: bbox.height + 12,
});
text.attr({
x: -bbox.width / 2,
y: 0,
});
if (hasChildren) {
group.addShape('marker', {
attrs: {
x: bbox.width / 2 + 5, // x轴位置
y: 0, // y轴位置
r: 3, // 半径
symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
stroke: '#C0C0C0', // icon颜色
lineWidth: 1,
cursor: 'pointer',
},
name: 'collapse-icon',
});
}
return rect;
},
});
- 常用节点类型：
- circle： 圆形
- rect ：矩形
- modelRect ： 卡片
- image ： 图片 更多类型见G6官网g6.antv.vision/zh/docs/man…
- 节点通用属性：
- 样式属性： 通过style修改节点样式！
- 标签（Label）极其配置（labelCfg）:
在G6.TreeGraph（）里面配置：
defaultNode: {
type: 'tree-node',
size: [100, 40],
anchorPoints: [
// 边的连接点
[0, 0.5],
[1, 0.5],
],
labelCfg: {
style: {
fill: '#595959',
// fontSize: 14,
},
// offset: 30,
},
},
defaultEdge: {
type: 'cubic-horizontal',
style: {
stroke: '#A3B1BF',
},
labelCfg: {
positions: 'left',
},
},
- 实例化视图全局配置
flowGraph = new G6.TreeGraph({
container: ref.current || '',
// fitView: true, // 图是否自适应画布
animate: true, // 启用全局动画
width,
height,
plugins: [tooltip],
minZoom: 1, // 节点最小缩放
maxZoom: 3.2,
modes: {
default: [
// 设置默认方法
// 'collapse-expand', // 节点伸缩方法
'drag-canvas', // 控制流程图的移动
'zoom-canvas', // 控制流程图的缩放
'click-select',
],
},
defaultNode: {
type: 'tree-node',
size: [100, 40],
anchorPoints: [
// 边的连接点
[0, 0.5],
[1, 0.5],
],
labelCfg: {
style: {
fill: '#595959',
// fontSize: 14,
},
// offset: 30,
},
},
defaultEdge: {
type: 'cubic-horizontal',
style: {
stroke: '#A3B1BF',
},
labelCfg: {
positions: 'left',
},
},
layout: {
type: 'compactBox', // 布局类型 紧凑树
direction: 'LR', // 自左至右布局
dropCap: false, // 缩紧树
indent: 200, // 列间距
getHeight: () => {
// 高度
return 5;
},
getVGap: () => {
// 各节点之间的间距
return 24;
},
// getHGap: () => {
// // 连接线曲滑度 值越大线条越弯曲
// return 1;
// },
getWidth: (d) => {
// 宽度
return G6.Util.getTextSize(d.nodeConfigName, fontSize)[0] + 10;
},
getSide: () => {
return 'left';
},
},
});
- 渲染：
- flowGraph.data(list) list：要渲染的数据
- flowGraph.render() 渲染与更新
- flowGraph.read(data) 接收数据，并进行渲染，read 方法的功能相当于 data 和 render 方法的结合。
- flowGraph.zoomTo(2) 控制节点的单个大小
- flowGraph.fitCenter() 视图居中 使用这个方法
- flowGraph.translate(200, 300) 采用绝对位移将画布移动到指定坐标。 更多属性见官网（视口操作）：g6.antv.vision/zh/docs/api…
