Raphael+D3实现中国热点地图

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方法会根据热度是最大差别自动将其映射到颜色数组中。

最终的体现效果如图。

评论

1 楼 michelya 2013-07-25  

想问一下，你svg path点怎么得到的