Tree

概述

树图，支持树型数据，继承于Graph。

属性

modes {String}

默认模式集

{
  // 默认模式
  default: [
    'dragBlank', 'collapse', 'spreadout', 'buttonPointer'
  ]
}

showButton {Boolean}

是否显示按钮（如：展开、折叠按钮）

layout {Object}

布局对象，详见Layout

layoutFn {Function}

树布局构造函数。可选值为G6.Layout.CompactBoxTree，G6.Layout.IndentedTree，G6.Layout.Dendrogram和G6.Layout.LayeredTidyTree，默认值为G6.Layout.CompactBoxTree。详细信息见布局API文档。

layoutCfg {Object}

树布局属性。布局API文档。具体树布局属性参数配置可以通过G6树图布局工具调试和预览。

实例方法

source {Function}

数据输入是一个树型结构的对象。

/**
 * 加载数据
 * @param  {Object} data  数据源
 */
tree.source(data);

以下字段对默认的树节点有特定含义

{
  id,          // 唯一标识
  parent,      // 父对象
  children,    // 子元素集
  isCollapsed, // 是否折叠 Boolean
  size,        // 尺寸
  style,       // 样式
  color,       // 颜色
  shape,       // 形状
  label        // 标注
}

示例

add {Function}

/**
 * 添加子元素
 * @param  {String} parentId  父节点 ID
 * @param  {Object} model     子元素数据模型
 */
tree.add(parentId, model);

changeLayout {Function}

更改布局

/**
 * 更改布局
 * @param  {Object} layout 布局对象
 */
tree.changeLayout(layout);