[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)

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

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

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