Raphael实现商品来源去向图

数据可视化 是很多大数据分析的一项重要工作，甚至有专门的团队做这项工作。Web上的各种图形（饼状图，柱状图等）一直被flash所垄断，随着HTML5的发展，SVG和Canvas也逐渐走上舞台。这不，产品要求跨平台，这次不能使用flash。考虑到第一次接触，开发周期较短，评估后决定使用Raphael.js。

 

Raphael，意为拉斐尔（姓氏），另外拉斐尔也是意大利画家、建筑学家。Raphael.js 作者是 Dmitry Baranovskiy ，请记住该人，他应该和 John Resig 一样绽放光芒。该库已经被合并至 Sencha，他本人也已加入 Sencha 团队。

 

我做的这个叫做 “商品来源去向” 分析，如图

 

 

数据由后台提供

1. 接口我来约定（早期由我尝试开发）

2. 各图的位置｜大小｜偏移等固定 / 商品名｜百分比变化

3. 点击来源图，会出现箭头指向去向

 

开发时碰到一些问题

1. svg是谁最后append，那么谁就在最上面，把下面的盖住了。Raphael没有insert方法，指定层级

2. 需要复习和补习一些数学，线性代数（矩阵）等知识

3. 需要学习SVG，VML相关技术

4. ......

 

源码及DEMO：http://snandy.github.io/lib/graph/raphael/ ，特别感谢下 nick ，他正在做这方面的研究，开发过程中总是向他请教。

 

相关：

http://raphaeljs.com/

http://julying.com/lab/raphael-js/docs/ （中文文档，感谢王子墨，他是Raphael.js国内的先行者）

http://www.w3.org/TR/SVG/

https://developer.mozilla.org/en-US/docs/Web/SVG?redirectlocale=en-US&redirectslug=SVG

http://infogr.am/beta/

http://bl.ocks.org/mbostock/3750941

https://github.com/mbostock/d3/wiki

http://msdn.microsoft.com/en-us/library/bb263898(VS.85).aspx