Raphael为矢量图形提供了完美的跨浏览器实现方案。在支持SVG的浏览器中,它将代码渲染成SVG格式,在不支持SVG的浏览器中则会渲染为VML格式。只要对SVG有一定了解,上手Raphael也会很简单。
D3.js是个比较流行的数据可视化库,通过将数据绑定到DOM,再映射到document中。
使用Raphael实现一张中国地图:
var R = Raphael(divId, 560, 470);
var SetProvicePath = R.set();
var SetProviceText = R.set();
var ProvicePathattr = {
"fill" : "#f1f1f1",
"stroke" : "#FDFDFF",
"stroke-width" : 1,
"fill-opacity" : 0.85
};
var ProviceTextattr = {
"font-size" : 18,
"font-family" : "Microsoft YaHei"
};
initMAPDATA(data);
var maxdata = getMaxdata(MAPDATA);
var mindata = getMindata(maxdata);
//初始化地图
var china = {};
china.aomen = {
province : "澳门",
path : R.path("m 320.48227,337.56839 -1.7466,3.57753 c 0,0 1.61743,1.80305 3.60238,2.21758 1.98495,0.41451 3.62967,-1.00669 3.62967,-1.00669 l -5.48545,-4.78842 z").click(function(){clickCallBack(MAPDATA[0]["province"])})};
china.hongkong = {
province : "香港",
path : R.path("m 323.68571,334.54146 3.394,0.773 3.453,-2.558 1.666,4.582 c 0,0 -5.521,2.673 -3.691,1.785 1.828,-0.884 -4.641,-0.355 -4.641,-0.355 l -0.834,-3.454 0.653,-0.773 z").click(function(){clickCallBack(MAPDATA[1]["province"])})};
china.taiwan = {
province : "台湾",
path : R.path("m 403.3008,304.32526 -10.269,20.78425 -4.0012,6.449 -1.746,5.7312 -2.1471,1.30283 -2.2631,-6.43526 -3.3147,-3.95553 -0.8126,-10.2486 c 0,0 1.3916,-6.3798 3.0525,-8.58559 1.6614,-2.20336 11.0085,-14.61837 11.0085,-14.61837 l 9.1572,-4.69683 4.0557,2.96161 -2.7201,11.31117 z").click(function(){clickCallBack(MAPDATA[2]["province"])})};
……
使构造搞的地图实现自适应大小和动画:
//适应大小
var trans = [ "s", width / 560, height / 470, width / 2, height / 2 ];
for ( var i in china) {
SetProvicePath.push(china[i]['path']);
}
SetProvicePath.attr(ProvicePathattr).transform(trans);
//动画
SetProvicePath.mouseover(function(){
this.animate({"stroke-width": 2.7}, 1000, "elastic");
}).mouseout(function(){
this.animate({"stroke-width": 1}, 1000, "elastic");
});
Raphael会按照代码的顺序渲染矢量图,如我们代码中第一个是澳门,在浏览器中渲染出的<path>或<shape>第一个也将是澳门,所以随后使用D3绑定数据时,要注意按照<path>的顺序初始化好数据。
使用D3将数据绑定到渲染好的矢量图中以便让其控制热点的呈现,因为低版本的IE不支持D3所以不用考虑使用D3处理VML图形。
//根据数据着色
var ProviceFILLCOLOR = d3.scale.quantile().domain([mindata, maxdata]).range([0, 1, 2, 3, 4, 5, 6]);
d3.select(divId).selectAll("svg").selectAll("path").data(MAPDATA).style("fill", function(d){return FILLCOLOR[ProviceFILLCOLOR(d["data"])]}).append("svg:title").text(function(d){return d["province"] + "\n热度:" + d });
scale方法会根据热度是最大差别自动将其映射到颜色数组中。
最终的体现效果如图。
- 大小: 17.6 KB
- 大小: 19.6 KB
分享到:
相关推荐
该 Demo 是使用 Raphael 制作中国省份地图,结合 jquery 实现一 些动态点击效果,并且使用扩展 Raphael 内核,可以动态调整地图画布的大 小,还实现了点击动态生成热点数据的图形开发,具体界面请参照工程包中 图...
该 Demo 是使用 Raphael 制作中国省份地图,结合 jquery 实现一 些动态点击效果,并且使用扩展 Raphael 内核,可以动态调整地图画布的大 小,还实现了点击动态生成箭头数据的开发,在一个画布上勾勒箭头图形,具 ...
该 Demo 是使用 Raphael 制作中国大区、片区地图,结合 jquery 实现一 些动态点击效果,并且使用扩展 Raphael 内核,可以动态调整地图画布的大 小,还实现了点击动态生成热点数据的图形开发,具体界面请参照工程包...
基于jquery+raphael实现(矩形+线条)可拖动的树形图或流程图,支持各种浏览器,适合需按树形结构展示的流程图,可用于工作流,以及信用分险行业的决策流展示
使用raphael、jquery实现3D饼状图,鼠标点击划出等效果;
在使用raphael时,实现了双击所化的文字即可实现在线编辑的功能
raphael制作的吉林省地图。显示各个市区域、采用svg的矢量图技术。 附赠google吉林省地图
在本文中给大家分享如何使用raphael.js来完成地图交互,raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图、各类图表、以及图像裁剪、旋转、运动动画等等功能,需要的朋友可以参考下
Mapael - 基于raphael.js用于显示动态矢量地图的jQuery插件
本文结合实例,使用PHP+Mysql+jQuery实现中国地图各省份数据统计效果。 本例以统计某产品在各省份的活跃用户数为背景,数据来源于mysql数据库,根据各省份的活跃用户数,分成不同等级,并以不同的背景色显示各省份...
Raphael.JSON Raphael.Export Raphael.FreeTransform raphael.serialize
挂一个资源,看看能不能吸点积分... 临时简单弄的,通过raphael.js布置循环关系的数组,其它的拓扑图美观是美观,可惜布局太分散,定位太随机,有点强迫症的...2,raphael.cards.js --布局实现 3,cards.htm --布局调用显示
raphael
通过调用raphael绘制出中国地图,然后载入统计数据,由于地图区块小,我们不在地图载入的时候就将数据显示在地图区块上了,我们通过鼠标交互实现将数据信息更好的展示给用户。当鼠标滑向省份区块时,通过e.pageX和e....
一种基于D3和Raphael的交互式数据可视化模型,张辰,杨榆,数据可视化能够借助图形化的手段,清晰高效地传达信息。目前在Web应用中的可视化模型大多是基于位图的,图形缩放会直接影响其浏览
利用raphael.js进行流程图的绘制,js已封装好,可直接传入数据进行使用
Learning Raphael JS Vector Graphics 书+源码
NULL 博文链接:https://zha-zi.iteye.com/blog/2090872
Raphael.js PDF文档,说明Raphael.js的优点与D3的区别,以及由浅入深的范例
raphaeljs_starter.pdf