树布局算法

简介

这是一个纯粹的算法，本身不提供绘图功能，可是，基于此算法你可以非常容易的完成各种树图的绘制。

本算法本身是平台无关的，可以在所有支持JS和TS的环境中使用，包括H5、各种小程序、uni-app等。

温馨提示：使用中如果遇到任何问题，都可以点击此处给我们提Issue。

引入

你需要执行下面的安装命令：

npm install --save jsdoor

然后在需要使用地方引入：

import treeLayout from 'jsdoor/treeLayout/index.js';

创建计算对象

此算法是用于计算一个树结构的坐标的方法，传递配置config就可以获取树对象实例：

var treeObj=treeLayout(config);

配置数据结构

config是一个键值对格式的配置json，由于原始数据格式不一定，你需要传递数据格式的配置：

• "root":function(initTree){ /返回根结点/ }
• "id":function(treedata){ /返回id/ }
• "child":function(parentTree, initTree){ /返回孩子结点/ }

温馨提示：另外，你还可以通过tree.root()、tree.id()和tree.child()方法，随时调整配置。

使用对象计算

现在传递数据data进行计算即可：

var resultData=treeObj(data);

返回的数据结构

resultData是计算后带有结点坐标的数据，格式如下：

{node: {
  "XXX":{
      children: []
      data: any
      id: string||number
      left: number
      pid: any
      top: number
  },
  ...
}, root: string||number, size: number, deep: number}

node记录的是每个结点的信息，每个结点中的left和top就是该结点应该绘制的位置，data是结点的原始数据。

可能你已经发现了，树图分为很多种（圆形树，倒树等），上面并没有配置这些信息,是的，因为可能的树图无法预测，我们这里选择了一种最简单的模型，方便具体使用的时候可以在此基础上快速开发。

这是一棵从左到右，根节点位于左中心，每个节点位于一个1x1的正方形中心的单元树。

比如上图结点『油画』的数据如下：

"油画":{
  children: [];
  data: (2) ["油画", "手绘"];
  id: "油画";
  left: 1.5;
  pid: "手绘";
  top: 1.5
}