zoukankan      html  css  js  c++  java
  • D3.js 制作中国地图

    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/

     

  • 相关阅读:
    SQL的介绍及MySQL的安装
    git中级技能
    git基本用法
    git基本语法
    出租车数据分析
    使用Spark MLlib进行情感分析
    增量式编码器专题
    vue-loader的简单例子
    node爬虫(转)
    fs-extra 文件管理
  • 原文地址:https://www.cnblogs.com/geovindu/p/9207759.html
Copyright © 2011-2022 走看看