本文共 1204 字，大约阅读时间需要 4 分钟。

//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);		}

转载地址：http://kwcti.baihongyu.com/