antv G6学习

TreeGraph

1、数据（data）

const data = {
  //root 根节点
  id: 'people', //唯一标识 必选
  label: '人', //显示名字。必选
  x:10, //x轴位置，可选
  y:10, //y轴位置，可选
  collapsed: true,  //默认折叠 true：折叠，false：不折叠，非必选默认false
  depth: 0,   //层级，非必选，第一次渲染会自动添加
  style: {background:'#bfa'}, //节点样式，非必选
  data: {}, //todo
  side: 'left', //'left' | 'right' , todo,
  stateStyles: {},  //todo
  children:[  //子节点  非必选
    {
      id:'men',
      label:'男人',
      children:[
        //叶子节点
        {
          id: 'm1',
          label: '小明'
        },
        {
          id: 'm2',
          label: '小刚'，
        }
      ]
    },
    {
      id: 'women',
      label: '女人',
      children:[
        //叶子节点
        {
          id: 'wm1',
          label: '小红',
        },
        {
          id: 'wm2',
          label: '小丽'
        }
      ]
    }
  ],  
}

2、默认配置（defaultSet）

const defaultSet = {
  container: 'container',   //唯一必选，图的 DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象
  width: 1000,  //画布宽度
  height: 1000,   //画布高度
  renderer: 'canvas', //渲染方式 canvas | svg
  layout:{},  //布局方式
  fitView: true,  //自适应大小,
  fitCenter: true,  //自适应中心
  fitViewPadding: [], //自适应大小留白
  groupByTypes: true, //todo
  directed: true, //todo
  groupStyle: {style:{}}, //todo
  autoPaint: true,  //当图中元素更新，或视口变换时，是否自动重绘。
  modes: {default:{}},  //配置型过多，看@antv/g6-core/lib/types/index.d.ts=>ModeOption
  defaultNode: {type:,size:,color:},  //默认状态下节点的配置，比如 type, size, color。会被写入的 data 覆盖。
  defaultEdge: {type:,size:,color:}, //默认状态下边的配置，比如 type, size, color。会被写入的 data 覆盖。
  
  
}