绘制树图的时候，比较麻烦的是每个结点的位置计算，虽然存在更多的性能优化问题需要考虑，下面，通过简单的配置，你可以获取一些有树层次结构的数据对应的常见树图的结点位置信息。

使用方法

// 获取树图位置计算对象并配置
var tree=$chart.tree(config);
// 使用获取的对象计算
var tree_message=tree(/*传入原始数据*/[, begin_deg[, val_deg]]);

begin_deg和val_deg都分别是可选参数，只在绘制圆树的时候有效，分别表示圆树的起点弧度和跨越的弧度。

config 配置

config用于配置一些参数，告诉获取的对象，如何解析原始数据，如何计算结点位置等，其是一个json，下面是配置的选项，全部必输：

1.图形类型：左到右、右到左、上到下、下到上或圆

"type": "LR|RL|TB|BT|circle"

2.如果图形类型是LR|RL|TB|BT，需要设置下面二个参数

// 分别表示图形的宽和高
"width":number
"height":number

3.如果图形类型是Circle，需要配置下面三个参数

// 表示图形半径
"radius":number
// 圆心位置
"cx":number
"cy":number

下面还有三个配置，因为原始数据格式不一定，为了让tree对象可以正确解析，下面需要配置原始数据的解析方法。

4.获取根结点的方法

"root":function(initTree)

5.获取子结点的方法

"child":function(parentTree, initTree)

6.获取结点ID方法

"id":function(treedata)

返回数据结构

Object
    deep: 5
    node: {flare: {…}, analytics: {…}, cluster: {…}, AgglomerativeCluster: {…}, CommunityStructure: {…}, …}
    root: "flare"
    size: 149.5
    __proto__: Object

上面是我们在控制台打印出来的结果（一个具体的例子返回的），一共四个参数：deep树层次、node全部的结点信息、root根结点ID、size树最大宽（这里可以无视这个参数）。

上面的node需要进一步说明一下。其是一个json对象，是一个个结点，以其中一个结点为例，我们看看具体有什么：

palette:
    children: (4) ["ColorPalette", "Palette", "ShapePalette", "SizePalette"]
    data: {name: "palette", children: Array(4)}
    deg: 4.4505895925855405
    id: "palette"
    left: 650.7146717
    pid: "util"
    top: 312.7756479
    __proto__: Object

有七个参数，其中四个参数分别表示：children记录着该结点的孩子结点的ID、data结点对应的原始数据、id当前结点的唯一标识ID、pid当前结点的父结点ID。

最后还有三个没有说明，left和top，也就是结点应该绘制的位置（left, top），而deg是指该结点旋转的度数。