层次布局

demo @/demo/force-graph-vis-demo/demo-layout/layout-layer.vue

graph.layoutLayer(options)

Function

对图谱进行增次布局

参数

• options : object

  • root : string | Array<string>

    required

    根节点 id，通常情况下是 string 类型，支持多个根节点以数组形式传入

  • expandFirst = 'next' : 'next' | 'prev'

    optional

    优先展开根节点的 下层级 / 上层级，默认下层级

  • levelGap = 350 : number

    optional

    每层之间的间隔，默认 350 像素

  • nodeGap = 2 : number

    optional

    节点间垂直间隔，默认 2 像素

  • width = this.width : number

    optional

    布局容器宽度，默认当前画布宽度

  • height = this.height : number

    optional

    布局容器高度，默认当前画布高度

  • maxLevel = Infinity : number

    optional

    最大层数，默认无限制

  • padding : object

    optional

    布局树与容器的间隔

    • top = 30 : number

      optional

      距离画布顶部距离，默认 30

    • bottom = 30 : number

      optional

      距离画布底部距离，默认 30

    • left = 30 : number

      optional

      距离画布左侧距离，默认 30

    • right = 30 : number

      optional

      距离画布右侧距离，默认 30

层次布局插件事件

触发时机	事件名称	参数
计算分层数据时	layoutLayerData	{ levelNodes } - levelNodes: Array 分层数据