🎨 在理想的最美好世界中，一切都是为最美好的目的而设。 —— 伏尔泰
如果可以实现记得点赞分享，谢谢老铁～
一、技术选型
•从可维护性和可拓展性出发
•基本满足
1：链接: https://github.com/hukaibaihu/vue-org-tree
•线条用canvas绘画，其他元素用HTML实现。
2：https://segmentfault.com/a/1190000021972969
•便于后期灵活拓展，优先选择
3: http://antv-2018.alipay.com/zh-cn/g6/3.x/index.html
二、Graph G6
创建一个 G6 的关系图仅需要下面几个步骤：
1.创建关系图的 HTML 容器；
2.数据准备；
3.创建关系图；
4.配置数据源，渲染。
Step 1 创建容器
需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为 div 标签。G6 在绘制时会在该容器下追加 canvas 标签，然后将图绘制在其中。
HTML
Step 2 数据准备
引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点（nodes）和边（edges）字段，分别用数组表示：
const data = {
// 点集
nodes: [{
id: 'node1', // String，该节点存在则必须，节点的唯一标识
x: 100, // Number，可选，节点位置的 x 值
y: 200 // Number，可选，节点位置的 y 值
},{
id: 'node2', // String，该节点存在则必须，节点的唯一标识
x: 300, // Number，可选，节点位置的 x 值
y: 200 // Number，可选，节点位置的 y 值
}],
// 边集
edges: [{
source: 'node1', // String，必须，起始点 id
target: 'node2' // String，必须，目标点 id
}]
};
注意
•nodes 数组中包含节点对象，唯一的 id 是每个节点对象中必要的属性，x、 y 用于定位；
•edges 数组中包含边对象，source 和 target 是每条边的必要属性，分别代表了该边的起始点 id 与 目标点 id。
•点和边的其他属性参见链接：G6 的内置节点和边。
Step 3 创建关系图
创建关系图（实例化）时，至少需要为图设置容器、宽和高：
const graph = new G6.Graph({
container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
width: 800, // Number，必须，图的宽度
height: 500 // Number，必须，图的高度
});
Step 4 配置数据源，渲染
graph.data(data); // 读取 Step 2 中的数据源到图上
graph.render(); // 渲染图
最终的结果
三、项目应用
如何自定义节点，自定义样式？
第一种：通过 图形 Shape 内置节点类型自定义节点
•会按照addShape顺序来解析节点
G6.registerNode(
'nodeName',
{
options: {
style: {},
stateStyles: {
hover: {},
selected: {},
},
},
/**
* 绘制节点，包含文本
* @param {Object} cfg 节点的配置项
* @param {G.Group} group 图形分组，节点中图形对象的容器
* @return {G.Shape} 返回一个绘制的图形作为 keyShape，通过 node.get('keyShape') 可以获取。
* 关于 keyShape 可参考文档 核心概念-节点/边/Combo-图形 Shape 与 keyShape
*/
draw:(cfg, group) => {
// 最外面的那层
group.addShape('rect', {
attrs: {
x: 0,
y: 0,
width: 125,
height: 40,
fill: cfg.style.fill, // 填充色
stroke: '', // 边框
radius: 8
},
// must be assigned in G6 3.3 and later versions. it can be any value you want
name: 'rect-shape',
zIndex: 1,
});
// 里面的那层
group.addShape('rect', {
draggable: true,
attrs: {
x: 5,
y: 0,
width: 120,
height: 40,
fill: '#fff', // 填充色
stroke: '', // 边框
radius: 6
}
});
// 文字
group.addShape('text', {
attrs: {
// textBaseline: 'center',
y: 25,
x: 24,
lineHeight: 10,
text: cfg.label,
fill: '#000'
}
});
},
},
// 继承内置节点类型的名字，例如基类 'single-node'，或 'circle', 'rect' 等
// 当不指定该参数则代表不继承任何内置节点类型
extendedNodeName,
);
第二种：使用 DOM 自定义节点
SVG 与 DOM 图形在 V3.3.x 中不支持。 仅在 Graph 的 renderer 为 ‘svg’ 时可以使用 DOM 自定义节点。
⚠️ 注意:
•只支持原生 HTML DOM，不支持各类 react、vue 组件；
•使用 ‘dom’ 进行自定义的节点或边，不支持 G6 的交互事件，请使用原生 DOM 的交互事件；
•在 Safari 中，若 dom 节点被设置了 position:relative，将会导致渲染异常。Issus。
G6.registerNode(
'dom-node',
{
draw: (cfg: ModelConfig, group: Group) => {
const shape = group.addShape('dom', {
attrs: {
x: 0,
y: 0,
width: 100,
height: 24,
html: `
<div id=${cfg.id} class='dom-node' style="background-color: #fff; border: 2px solid red; border-radius: 5px; width: 300px; height: 200px; display: flex;">
<div style="height: 100%; width: 33%; background-color: #CDDDFD">
<img alt="" style="line-height: 100%; margin-left: 7px;" src="https://xxxx" width="20" height="20" />
</div>
<span style="margin:auto; padding:auto; color: #5B8FF9">${cfg.label}</span>
</div>`
}
});
return shape;
},
},
'single-node',
);
第三种：使用类 JSX 语法定义 G6 节点
在 G6 3.7.0 及以后的版本中，用户以使用类似 JSX 的语法来定义节点。只需要在使用 G6.registerNode 自定义节点时，将第二个参数设置为字符串或一个返回值为 string 的 function。
推荐用法
•在最外层包裹 group 标签，保证节点里面图形树结构完整
•字符串最好使用单引号包裹，以免遇到解析错误
•style 中随 node 变化的变量推荐使用 ${} 的模板语法加入
•图形内的相对定位推荐使用 marginTop 和 marginLeft 进行设置，x 与 y 会破坏层级关系定位
•如果涉及到需要横向排列的元素，在上一个元素使用next: inline来实现下一个元素跟随在上个元素后方
import { groupXML } from '../xml/groupXML.js'
G6.registerNode('rect-xml', {
jsx: groupXML
})
export const rootXML = (cfg) =>`
<rect style={{
width: 520,
height: 40,
textAlign: 'center',
fill: ${cfg.account_type == '' ? cfg.rootTitleColor : '#2D8CF0'},
radius: [10, 10, 0, 0],
name: 'rootHeader'
}}>
<text style={{
marginTop: 10,
marginLeft: 230,
fontWeight: '500',
fontSize: '16',
fill: '#FFFFFF' }}> ${cfg.nameHeader}</text>
</rect>`
第四种：使用React直接定义节点
下载依赖安装包
npm install @antv/g6-react-node
最终的视觉
