G6-treeGraph-笔记

节点node

1.节点总览defaultNode

节点总览 | G6 (antgroup.com)

1.节点的通用属性

1.节点的通用属性
id
x
y
type:类型
    circle圆/rect矩形/ellipse椭圆等
size:大小
    可能是数字或数组,根据type决定
anchorPoints:锚点
    常用:[[0, 0.5],[1, 0.5]]--在圆形上
style:节点样式
label:标签
    不能直接用data.id,这里的data是最外层的父元素
labelCfg:标签样式


2.style
背景色 描边 阴影 透明度opacity 鼠标cursor相关


3.labelCfg
位置 偏移 文字的样式相关

示例:
  defaultNode: {
    size: 26,
    anchorPoints: [
      [0, 0.5],
      [1, 0.5]
    ],
    style:{
      fill:'gold',
      cursor:'crosshair',
    },
  },

2.节点的配置方法

1.初始化全局配置
2.传数据的时候配置
    用的较少
3.graph.node
    常用于更新元素

示例:
graph.node((node)=>{
  return {
    label:node.id,// 此处的node是每一个节点
    labelCfg:{
      position: node.children && node.children.length > 0 ? 'left' : 'right', // 最子的节点在右边,其余的在左边
      offset:10,
    }
  }
})