Web Chart入门(3) 图形布局-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)

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

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

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

时间: 2024-11-02 08:21:42

Web Chart入门(3) 图形布局-Layout的相关文章

Web Chart入门(4) 图形布局-Layout 之js设计实现

前言 定位browser 的 chart,   VML,SVG, HTML5 Canvas使用的方式各不一样. 如果使用现有的js  library (各种实现js 图表的library汇总与比较) , 调用的API方式也肯定不同. 举个例子: draw2d 使用addFigure 和 setPosition 都可以设置图的位置. 混在特定技术或是特定library 里去layout , 很明显不是一个明智之举. 切分开来, layout 的功能对于任何的图形绘制都适用.就是本章所讨论的了. 实

Web Chart入门(6) canvas Chart 导出图文件

介绍 使用SVG绘制的图形可以导出为svg 格式的文件,使用浏览器等可以查看. 是否可以导出为png, gif 格式的文件呢? 当然是可以. 只是在 web 直接创建和操作文件是不建议的,而且存在各浏览器兼容的问题, 比如IE使用ActiveX来创建新文件. 正确的做法,是在web server 端传送文件到web 端, 不过对于web chart 来说, 好像又多绕了一圈. 这里的介绍为了简单,没有引入web Server. 既然使用的是Canvas,则本文的内容是针对支持HTML5的浏览器而

Web Chart入门(5) 4

实战draw2d(Raphael)之取消Chrome中Label Text 全部选中 情况描述 这里使用的是Rectangle , 里面加入一个Label 或多个Label 的组合图形. 在Chrome里拖拽图形的时候,偶尔会把所有Rectangle包含的Label 全部以深蓝色底色. 需要在非Canvas的区域点击一下,深底色才消除. 以上的状况出现在IE和Chrome都会有,但几率倒不是很大.在Firefox 中没有这个问题. 问题考虑与重现 既然不是所有流量器都有这个问题,应该和浏览器有一

Web Chart入门(5) 2

实战draw2d 之Label 放大,缩小的问题(raphael的text类似问题) 问题描述 在draw2d中使用Canvas 的setZoom function来扩大,缩小画布进而放大,缩小画布上的图形大小.(Zoom in/Zoom Out功能). 图形类型Circle, Rectangle的放大,缩小都还正常, 但是 在Chrome浏览器下Label 的缩小功能却存在着label 的文本缩小时反而会变大的状况. 具体的测试方式如下: 1. 没有给label 特别设定font size.

Web Chart入门(2) Web端图形绘制SVG,VML, HTML5 Canvas简单实例

VML 的用法和实例 引入命名空间之后,就可以直接使用标签的方式绘制图形. 如下例:绘制一条从 坐标(20,20) 到 坐标(200,200) 的直线. <HTML xmlns:v = "urn:schemas-microsoft-com:vml"> <HEAD><TITLE>VML Example</TITLE> <META http-equiv=Content-Type content="text/html; char

Web Chart入门(5) 3. 实战draw2d 之图形填充色(纯色 or 渐变)

颜色渐变 draw2d 目前没有提供直接对Figure 设置渐变效果的API. 但是raphael 有提供, 这样的话基本上在draw2d实现渐变成为可能. 颜色渐变功能来源 raphael 提供的图形背景色渐变的设置:看例子 <!--Add by oscar999--> </HTML> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/st

Web Chart入门(1) Web端图形绘制SVG,VML, HTML5 Canvas技术比较

先介绍一下矢量图的概念: 矢量图使用直线和曲线来描述图形,这些图形的元素是一些点.线.矩形.多边形.圆和弧线等等,它们都是通过数学公式计算获得的.例如一幅花的矢量图形实际上是由线段形成外框轮廓,由外框的颜色以及外框所封闭的颜色决定花显示出的颜色. SVG,VML, HTML5 Canvas  这三个技术绘制的都是矢量图. 只是由不同的厂商开发出来的. 要达成的效果基本是一样的. 1. VML 全称Vector Markup Language(矢量可标记语言). 是微软1999年9月附带IE5.0

Web Chart入门(5) 1. 实战draw2d 之总体介绍

draw2d 是什么? 首先需要明确的是这里指的draw2d是个什么东东? 在搜索引擎中用draw2d这个关键字搜索会找到两个东西 一个是集成在eclipse(也可以单独使用) 里面使用SWT开发的一套绘图的工具.也就是java 开发一个图形绘制的应用程序,可以用来绘制UML等. 另一个是Draw2D touch,使用JavaScript 和HTML Canvas 开发的可以在web 端使用的js 框架. 这里说的是第二种, web 端使用的.具体来说, draw2d是什么,直接来看官方的定义:

Web Chart入门(7) 物理动画效果(如撕扯效果)

物理动画 这里物理动画说的是,图形的动画效果和实际生活中的物理效果类似,比如说重力影响的效果. 其实动画的实现就是把一个动作拆分成间隔连续的去完成, 视觉上就感觉是在动的了. 比如把一个图从左边移到右边, 设总距离100的话, 每隔 1/40秒 移到 1 的话,效果就会有了. 这个时间间隔和距离间隔设置多少为最佳,美学上是有一些定义的,这里就不探讨了. 一个拽动和撕扯窗布的例子 三个文件 tearCloth.html ;  tearCloth.css ; tearCloth.js tearClo