前言
从上一篇:
[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)
这种布局不关心业务数据的逻辑, 只是单单从展现的效果最美观来显示图形。
使用到了物理学上里的概念。
关于此布局, 后续会有详细的介绍。