可视化工具D3.js教程 入门 （第十四章）—— 中国地图
首先我们需要的是 中国地图的json数据：请戳这里
接下来咱们直接上代码：
代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中国地图title>
<script src="./d3.min.js">script>
head>
<body>
<svg width="900" height="700">svg>
body>
<script>
//获取svg
var svg = d3.select('svg');
var width = svg.attr('width');
var height = svg.attr('height');
//创建区域分组
var g = svg.append('g').attr('transform','translate(0,0)');
//创建一个地图投影
var mercator = d3.geoMercator()
.center([107,31])//设置投影的中心点 经纬度
.scale(550)//设置缩放因子
.translate([width/2,height/2]);//设置平移偏移量
//创建一个地理路径生成器
var geoPath = d3.geoPath()
.projection(mercator)//设置地理路径生成器的投影方式
//获取中国地图的json文件
//利用node.js 在本地起一个http-server
d3.json('map.json').then(function (data) {//D3 v5版本d3.json()现在将返回一个你可以在.then()方法中处理的Promise
console.log(data);//features
//新建一个颜色比例尺
var scaleColor = d3.scaleOrdinal()
.domain(d3.range(data.features.length))
.range(d3.schemeCategory10);
//绘制区域
g.append('g')
.selectAll('path')
.data(data.features)
.enter()
.append('path')
.attr('stroke','gray')
.attr('strok-widht',1)
.attr('d',function (d,i) {
return geoPath(d);
})
.attr('fill',function (d,i) {
return scaleColor(i);
})
.on('mouseover',function (d,i) {
d3.select(this).attr('fill','yellow');
})
.on('mouseout',function (d,i) {
d3.select(this).attr('fill',scaleColor(i));
});
//绘制文字
g.append('g')
.selectAll('text')
.data(data.features)
.enter()
.append('text')
.attr('font-size',12)
.attr('text-anchor', 'middle')
.attr('x',function (d,i) {
var position = mercator(d.properties.centroid || [0,0]);
return position[0];
})
.attr('y',function (d,i) {
var position = mercator(d.properties.centroid || [0,0]);
return position[1];
})
.attr('dy',function (d,i) {
//这里为什么这么写呢，因为澳门和香港重合了，挤到一起了。
if (d.properties.name === '澳门特别行政区') {
return 10;
}
})
.text(function (d,i) {
return d.properties.name;
});
});
script>
html>
效果：