使用D3渲染中国地图

//1、先在页面中初始化一个svg标签
		var w = 1000,h = 1000;
		var svg = d3.select('body')
					.append('svg')
					.attr('width',w)
					.attr('height',h)
					.attr('transform','translate(0,0)');
		//d3.geo  是d3中一些地图相关的方法
		var projection =d3.geo.mercator()//投影的方法
					.center([107,31])//经纬度
					.scale(550)//放大的倍数
					.translate([w/2,h/2]);//投影在某个位置
		//坐标的转换	把相应经纬度的点 转换成 svg里面d属性相应的要去画的  坐标点
		var path = d3.geo.path()
					.projection(projection);
		//d3中做服务器请求的  方法来的	
		d3.json('./data/china_diaoyudao.json',function (err,root) {
			//root  是用d3请求回来的数据
			console.log(root.features);//数组  34个
			d3.select('svg').selectAll('path')
							.data(root.features)
							.enter()
							.append('path')
							.attr('stroke','gray')
							.attr('stroke-width','1')
							.attr('d',function (data,index) {
								return path(data);
							})
							.attr('fill',function (data,index) {
								return color();
							})
							.on('mouseover',function () {
								//this dom对象
								d3.select(this)
								.attr('fill','yellow')
							})
							.on('mouseout',function () {
								d3.select(this)
								.attr('fill',color())
							})
		})
		//返回一个随机16进制的 颜色
		function color(){
		    return '#'+Math.floor(Math.random()*0xffffff).toString(16);
		}