### 前言 从上一篇： [[Web Chart系列之二] 各种实现js 图表的library汇总与比较](http://blog.csdn.net/oscar999/article/details/8536727) 的介绍， 目前提供提供绘制矢量图的library 还是很多的。  如果只是需要绘制一些柱状图， 饼图， 散点图, 时序图这样一些简单图的话， 从所列出的library 中是可以找到很多选择的。 但是如果需要绘制的是结构图， 关联图这样一些数据量大，逻辑稍显复杂的图，页面布局就是需要面临的一个大问题了。 [d3.js](http://mbostock.github.com/d3/)   提供了比较高级的的页面布局， 树形图；爆炸图； 三维图。 以及有专门使用其开发实现layout的ECO System(理解为衍生库好了)。 但是比较致命的是d3.js 对于IE的支持不好。 [JavaScript InfoVis Toolkit](http://thejit.org/) ， sencha(研发Extjs的公司)的一个实验项目。也提供了动画效果的树状图，力导向图。缺点是layout 部分的代码紧紧的绑定在其他代码中， 要想剥离或是改动的话，就比较困难了。 ### 布局的讨论 这里只讨论两种布局： 树和图。 为什么只讨论这两种？ 饼图， 柱状图相当简单， 而且有大量的现有组件可以使用。 三维图， 笔者暂时尚未涉入到此部分，所以也就不讨论了。 首先需要明确的一个问题是： 树和图的区别？ 直观上的感觉好像是： 往左右或是上下两个方向延伸的是树， 往四周任意方向延伸的是图。 这种感觉在科学上是不科学的。 《数据结构》里对树和图有很明确的界定。最大的区别就是： 树： 一个节点只有父节点。 图： 一个节点可以有任意多个父节点。 从这个意义上来说， 树也可以是环形的。 但是， 这里讨论的layout 讨论的树和图的概念， 还是有点偏向于直观上的理解：  左右或是上下两个方向延伸的是树， 往四周任意方向延伸的是图。 ### 树的布局 树的布局算法相对简单，只需要遵循一些基本的原则就可以了： 1.  在同一层的节点之间应该保持一定的距离。 2.  父节点需要位于其包含的所有子节点的中心位置 3.  整个树应尽量保持对称，平衡。 4.  相同子树的呈现效果应尽量相同 5.  在不违反以上规则的状况相， 树应该尽量的省空间。 ### 图的布局 图的布局方式很多， 综合起来， 常见的有以下2种 1.  环形    环形图又分为两种    a)  同心圆：  所有的子节点层都围绕一个圆点展开。    b)  异心圆： 每个子节点都是下一级子节点的圆心。 2. 力导向(Force-directed)    这种布局不关心业务数据的逻辑， 只是单单从展现的效果最美观来显示图形。    使用到了物理学上里的概念。 关于此布局， 后续会有详细的介绍。