[Web Chart系列之三] 图形布局-Layout

前言

从上一篇：

[Web Chart系列之二] 各种实现js 图表的library汇总与比较

的介绍， 目前提供提供绘制矢量图的library 还是很多的。 

如果只是需要绘制一些柱状图， 饼图， 散点图, 时序图这样一些简单图的话， 从所列出的library 中是可以找到很多选择的。

但是如果需要绘制的是结构图， 关联图这样一些数据量大，逻辑稍显复杂的图，页面布局就是需要面临的一个大问题了。

d3.js   提供了比较高级的的页面布局， 树形图；爆炸图； 三维图。 以及有专门使用其开发实现layout的ECO System(理解为衍生库好了)。 但是比较致命的是d3.js 对于IE的支持不好。

JavaScript InfoVis Toolkit ， sencha(研发Extjs的公司)的一个实验项目。也提供了动画效果的树状图，力导向图。缺点是layout 部分的代码紧紧的绑定在其他代码中， 要想剥离或是改动的话，就比较困难了。

布局的讨论

这里只讨论两种布局： 树和图。 为什么只讨论这两种？ 饼图， 柱状图相当简单， 而且有大量的现有组件可以使用。 三维图， 笔者暂时尚未涉入到此部分，所以也就不讨论了。

首先需要明确的一个问题是： 树和图的区别？

直观上的感觉好像是： 往左右或是上下两个方向延伸的是树， 往四周任意方向延伸的是图。

这种感觉在科学上是不科学的。 《数据结构》里对树和图有很明确的界定。最大的区别就是：

树： 一个节点只有父节点。

图： 一个节点可以有任意多个父节点。

从这个意义上来说， 树也可以是环形的。

但是， 这里讨论的layout 讨论的树和图的概念， 还是有点偏向于直观上的理解：  左右或是上下两个方向延伸的是树， 往四周任意方向延伸的是图。

树的布局

树的布局算法相对简单，只需要遵循一些基本的原则就可以了：

1.  在同一层的节点之间应该保持一定的距离。

2.  父节点需要位于其包含的所有子节点的中心位置

3.  整个树应尽量保持对称，平衡。

4.  相同子树的呈现效果应尽量相同

5.  在不违反以上规则的状况相， 树应该尽量的省空间。

图的布局

图的布局方式很多， 综合起来， 常见的有以下2种

1.  环形

     环形图又分为两种

     a)  同心圆：  所有的子节点层都围绕一个圆点展开。

     b)  异心圆： 每个子节点都是下一级子节点的圆心。

2. 力导向(Force-directed)

     这种布局不关心业务数据的逻辑， 只是单单从展现的效果最美观来显示图形。

     使用到了物理学上里的概念。

关于此布局， 后续会有详细的介绍。