根据各个省份的数值从小到大,显示的颜色由浅到深。
效果图:
源代码:
<html>
<head>
<title>D3 值域渐变地图</title>
<style type="text/css">
.tooltip{
font-family:simsun;
font-size:16px;
width:120;
height:auto;
position:absolute; //绝对路径
text-align:center;
border-style:solid;
border-width:1px;
background-color:white;
border-radius:5px;
}
</style>
</head>
<body>
<!-- D3js系列文件 -->
<script type="text/javascript" src="js/d3/d3.js"></script>
<script type="text/javascript" src="js/d3/d3.min.js"></script>
<!-- 读取topJson文件 -->
<script type="text/javascript" src="js/d3/topojson.js"></script>
<script type="text/javascript">
var width =1000;
var height =1000;
var svg =d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
//投影
var projection =d3.geo.mercator()
.center([107,30]) //中心点
.scale(800) //地图大小
.translate([width/2,height/2-50]); //地图宽度和高度
//投影后获得的路径
var path =d3.geo.path()
.projection(projection);