读书人

Raphael+D3兑现中国热点地图

发布时间: 2012-06-25 21:24:50 作者: rapoo

Raphael+D3实现中国热点地图

Raphael为矢量图形提供了完美的跨浏览器实现方案。在支持SVG的浏览器中,它将代码渲染成SVG格式,在不支持SVG的浏览器中则会渲染为VML格式。只要对SVG有一定了解,上手Raphael也会很简单。

D3.js是个比较流行的数据可视化库,通过将数据绑定到DOM,再映射到document中。

?

使用Raphael实现一张中国地图:

??

?

使构造搞的地图实现自适应大小和动画:

?

?scale方法会根据热度是最大差别自动将其映射到颜色数组中。


Raphael+D3兑现中国热点地图

最终的体现效果如图。


Raphael+D3兑现中国热点地图

读书人网 >Web前端

热点推荐