25年过去了,brooks博士著名的“没有银弹”的论断依旧没有被打破。HTML5也是一样。但这并不妨碍HTML5是一个越来越有威力的“炸弹”:发展迅速、势不可挡。随着HTML5技术的普及,用HTML5做可视化呈现的项目越来越多了。HTML5的优势明显:网页上直接运行无需插件、手机平板方便兼容、代码开发和维护相对容易,等等。一大波一大波的做Java、.NET甚至C++桌面的程序老手们都纷纷开始研究javascript了,而初出茅庐的新一代程序猿更是义无反顾的直奔HTML5这个技术大热点而来。
HTML5涵盖的技术点很多,甚至延伸到了前端、后端、通讯等各个层面。前端的canvas绘图这块无疑是它的核心内容。Canvas的API虽然不是很复杂很强大,但是做一般的2d绘图基本都够用了。基于这些API,一大堆的2d绘图组件纷纷出炉。Echarts、d3.js都是很不错的项目。Echarts主要是chart组件,而d3相对杂一些,很多呈现方式很有创意,值得研究。研究d3的起因是最近有一个项目,用户截了一张效果图让我们用HTML5做一下:
看着很眼熟,搜了一下,感觉就是d3例子中的sunburst效果,程序在这里:
http://bl.ocks.org/mbostock/4063423
看上去似乎也不难,就是一圈一圈的饼图,把树状结构数据按占比一层一层绘制上去就行了。所以引起了自己动手做一个的兴趣。“sunburst”英文里应该是“云开日出”的意思,类似强烈的光芒从云层背后透射出来,不知为何中文里大多把它翻译成“日落”。比如这把Fender Telecaster吉他型号是brown Sunburst款,就会被大家翻译成“日落色”。
关于日出和日落更喜欢哪一个的问题,网上还真有这样的调查。有意思的是,选择喜欢日落的远多于选择日出的。日出代表希望,日落代表成熟,都是一种美,哪个更美要看你个人的心境,因为它的美丽是由心生。为了不在这个问题上站错对,我们还是给他重新起一个更加响亮霸气的中文名字:“彩虹爆炸图”,怎么样?
仔细研究一下彩虹爆炸图的结构,无非就是一个树形结构,并采用发射状的布局。根节点在中间(也可以认为没有唯一的根,而是一堆根节点围绕在第一圈),一次向外发散排列。每一个节点有名称、数值。节点可以按照自身数值在扇区所占比例进行绘制,这样就不用管节点具体数值有多大多小了。这种图最先是由布朗大学教授John T. Stasko设计。
http://www.cc.gatech.edu/~john.stasko/
经过一天的折腾,终于做出了一个还算过得去的“彩虹爆炸图”。先上个图看看:
· 可以通过json来定义数据和样式(类似百度的echarts那样);
· 颜色可以固定,也可以自动彩虹色;
· 自动计算数值及角度占比;
· 动态显示导航路径;
· 鼠标动态高亮显示路径;
· 动画飞入、展开导航路径;
· 全矢量,可鼠标缩放、平移,不失真;
下面咱们来看下折腾过程中的几个重点:
一、定义节点对象
首先定义每一个小扇片节点。每个扇片可以用一段饼图来绘制。为了简单方便,这里用了最简单高效偷懒的方法:用一个半径很粗的线画一段角度的arc,即可。如下图:
另外还有文字等内容。所以定义它的json结构大概如下:
- var item = {name: '名称', color: 'red', angle: '45', …};
此外,下一圈的数据,可直接定义为这个节点的“孩子节点”,直接在item中定义一个data的子节点数据:
var item = {name: '名称',color: 'red',angle: '45',data:[
- {name:’孩子一’,color:’green’,…},
- {name:’孩子二’, color:’yellow’,
- ]};