D3.js学习笔记十六:D3.js地图概述

2015年03月09日 javascript 暂无评论 阅读 113 views 次

< script type = "text/javascript" >
d3.json("json/china_simplify.json", function(error, data) {
var svg = d3.select("body")
.append("svg")
.attr("width", 600)
.attr("height", 400);

var projection = d3.geo.mercator().center([107, 31]).scale(350).translate([230, 260]);

//生成路径集
var path = d3.geo.path().projection(projection);

//生成区块集
var mapPart = svg.selectAll("path")
.data(data.features)
.enter()
.append("g");

mapPart
.append("path")
.attr("d", path)
.attr("fill", "#09F");

mapPart
.append("title")
.text(function(d) {
return d.properties.name;
});
}); < /script>

 

 

d3.geo.mercator是D3.js的投影方法,关于投影方法类型和参数含义,请参考: https://github.com/mbostock/d3/wiki/Geo-Projections。使用这个投影方法得到了地图边缘的点组成的路径,接下来就是将路径描绘到SVG图像中,就不再赘述了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中国地图</title>
<script type="text/javascript" src="js/d3.js"></script>
</head>
<body>
<script type="text/javascript">
d3.json("json/china_simplify.json",function(error,data)
{
var svg=d3.select("body")
.append("svg")
.attr("width",600)
.attr("height",400);
var projection = d3.geo.mercator().center([107,31]).scale(350).translate([230,260]);
//生成路径集
var path =d3.geo.path().projection(projection);
//生成区块集
var mapPart=svg.selectAll("path")
.data(data.features)
.enter()
.append("g");
mapPart
.append("path")
.attr("d",path)
.attr("fill","#09F");
mapPart
.append("title")
.text(function(d){return d.properties.name;});
});
</script>
</body>
</html>

json 文件在这里:

china_simplify

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: