G6绘制树形图（自定义节点、自定义边、自定义布局）
G6绘制树形图（自定义节点、自定义边、自定义布局）1设计节点
G6绘制树形图（自定义节点、自定义边、自定义布局）
1 设计节点
在 registerNode 中定义所有的节点
G6.registerNode(tree-node,{drawShape:functiondrawShape(cfg,group){定义图中需要的节点}},single-node,);为了使用内置的布局方式，选择参数为 ‘tree-node’ 树节点类型，数据格式可以存在children子节点，效果自动生成子树cfg 可以拿到数据，如cfg.id、cfg.name
1.1 定义节点和文本
使用 group.addShape(‘rect’, {}) 定义节点rect配置参数：https://antv-g6.gitee.io/zh/docs/api/shapeProperties/#fill
// 定义节点 rectconstrect=group.addShape(rect,{// rect表示矩形图形attrs:{// 节点定义参数:颜色、阴影...},name:rect-shape,// 为这个节点起名字 不过没有使用过这个名字});使用 group.addShape(‘text’, {}) 定义文本text
// 定义文本textconsttext=group.addShape(text,{// text表示文本attrs:{// 参数：颜色、文字...},name:text-shape,});节点和文字生成后，再定义他们的相对位置参考官网定义复杂图样式的方式：https://antv-g6.gitee.io/zh/examples/tree/customItemTree#customTree使用 .getBBox() 获得该文本的盒子bbox，使用文本盒子的相对位置后面的位置坐标
constbbox=text.getBBox();// 获得文本的盒子// 设置rect 节点的位置rect.attr({x:-bbox.width/2-5,// x坐标y:-bbox.height,// y坐标width:bbox.width+12,// 宽height:bbox.height+8,// 高});// 设置text文本的位置text.attr({x:-bbox.width/2,y:-bbox.height/2+3,})效果如下
1.2 增加节点
如果想为节点再增加一个小节点，并且位置随着大节点移动，如图
新增节点和文本 rect2 text2
为rect2 text2设置坐标，以bbox作为参考位置
// 设置坐标轴和宽高rect2.attr({x:-bbox.width/2-24,y:-bbox.height/2-1,width:14,height:10,});text2.attr({x:-bbox.width/2-23,y:-bbox.height/2+4,})
