首页 > > 网页制作 > Javascript >

D3.js 制作中国地图

2018-06-24 02:19:20来源：未知阅读 ()

from: http://d3.decembercafe.org/pages/map/index.html

GeoJSON is a format for encoding a variety of geographic data structures.

http://geojson.org/

https://msdn.microsoft.com/en-us/library/mt712806.aspx

GeoJSON 是用于描述地理空间信息的数据格式。GeoJSON 不是一种新的格式，其语法规范是符合 JSON 格式的，只不过对其名称进行了规范，专门用于表示地理信息。

GeoJSON 的最外层是一个单独的对象（object）。这个对象可表示：

几何体（Geometry）。

特征（Feature）。

特征集合（FeatureCollection）。

最外层的 GeoJSON 里可能包含有很多子对象，每一个 GeoJSON 对象都有一个 type 属性，表示对象的类型，type 的值必须是下面之一。

Point：点。

MultiPoint：多点。

LineString：线。

MultiLineString：多线。

Polygon：面。

MultiPolygon：多面。

GeometryCollection：几何体集合。

Feature：特征。

FeatureCollection：特征集合。

在线工具

在线生成 GeoJSON：http://geojson.io/

简化、转换 GeoJSON 和 TopoJSON：http://mapshaper.org/

https://pypi.org/project/geojson/

https://github.com/d3/d3/wiki

<!DOCTYPE html>
<html lang="en">
  <head>  
        <meta charset="utf-8">  
        <title>中国地图</title>  
  </head> 
<style>

</style>
<body>
<script src="d3.v3.min.js"></script>
<script>
	var width  = 1000;
	var height = 1000;
	
	var svg = d3.select("body").append("svg")
	    .attr("width", width)
	    .attr("height", height)
	    .append("g")
	    .attr("transform", "translate(0,0)");
	
	var projection = d3.geo.mercator()
						.center([107, 31])
						.scale(850)
    					.translate([width/2, height/2]);
	
	var path = d3.geo.path()
					.projection(projection);
	
	
	var color = d3.scale.category20();
	
	
	d3.json("china.geojson", function(error, root) {
		
		if (error) 
			return console.error(error);
		console.log(root.features);
		
		svg.selectAll("path")
			.data( root.features )
			.enter()
			.append("path")
			.attr("stroke","#000")
			.attr("stroke-width",1)
			.attr("fill", function(d,i){
				return color(i);
			})
			.attr("d", path )
			.on("mouseover",function(d,i){
                d3.select(this)
                    .attr("fill","yellow");
            })
            .on("mouseout",function(d,i){
                d3.select(this)
                    .attr("fill",color(i));
            });
		
	});

</script>
	
</body>  
</html>

　　https://www.webdesignerdepot.com/2009/06/50-great-examples-of-data-visualization/