antv g6学习记录

227 阅读1分钟

记录一个case:该case采用dagre包中方法初始化了一个graph,然后给graph应用dagre布局后,将布局信息反射到源数据,然后采用antv/g6做渲染引擎绘制graph

  • dagre.graphlib.Graph实例化一个graph实例
  • 操作graph,调用setDefaultEdgeLable、setGraph、setNode、setEdge方法,设置graph信息
  • 调用dagre.layout(graph),给graph布局
  • 从graph中获取node的坐标信息赋值给data源数据
  • 从graph的获取edge的point信息赋值给data源数据的startPoint、endPoint、controlPoints
  • 采用antv/g6渲染data