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/

D3.js 制作中国地图的更多相关文章

  1. D3.js 制作中国地图 .net 公共基础类

    D3.js 制作中国地图 from:  http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding ...

  2. 利用d3.js绘制中国地图

    d3.js是一个比較强的数据可视化js工具. 利用它画了一幅中国地图,例如以下图所看到的: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3ZhcDE=/ ...

  3. 用echarts.js制作中国地图,点击对应的省市链接到指定页面

    这里使用的是ECharts 2,因为用EChart 3制作的地图上的省市文字标识会有重叠,推测是引入的地图文件china.js,绘制文字的坐标方面的问题,所以,这里还是使用老版本. ECharts 2 ...

  4. echarts.js制作中国地图

    一.准备 1.  打开sublime,新建一个echarts文件夹,新建echarts.html文件 2.  在echarts.html文件中,为ECharts准备一个Dom(id是china-map ...

  5. 如何使用highmaps制作中国地图

    如何使用highmaps制作中国地图 文章目录 Highmaps 所需文件 地图初始化代码 highmaps 渲染讲解 highmaps 中国各城市坐标的json文件 highmaps 线上DEMO ...

  6. 使用highmaps制作中国地图

    Highmaps 所需文件 http://code.highcharts.com/maps/highmaps.js(地图渲染的核心文件 必须引用)http://code.highcharts.com/ ...

  7. 使用echarts简单制作中国地图，echarts中国地图

    网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...

  8. echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍

    今天花了一天的时间,用echart弄了一个效果,是从中国地图点进去身份并把改省份的数据渲染出来的效果,刚开始完全没有头绪,只能硬着头皮去看百度echart的api,和博客,看了半天,好家伙,终于给我找 ...

  9. Javascript实战开发：教你使用raphael.js绘制中国地图

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大 ...

随机推荐

  1. 使用PostgreSQL进行中文全文检索

    code[class*="language-"], pre[class*="language-"] { background-color: #fdfdfd; - ...

  2. ZKWeb网页框架1.8正式发布

    1.8.0更新的内容有 破坏性更新 更新ZKWeb.System.Drawing到3.0.0 请修改源代码中的System.Drawing到System.DrawingCore 现在已经不再需要使用D ...

  3. C语言小程序——推箱子（窄字符和宽字符）

    C语言小程序——推箱子(窄字符Version) 推箱子.c #include <stdio.h> #include <conio.h> #include <stdlib. ...

  4. java中的io系统详解

    相关读书笔记.心得文章列表 Java 流在处理上分为字符流和字节流.字符流处理的单元为 2 个字节的 Unicode 字符,分别操作字符.字符数组或字符串,而字节流处理单元为 1 个字节,操作字节和字 ...

  5. react-router V4中的url参数

    概述 之前写过react在router中传递数据的2种方法,但是有些细节没有理清楚,现在补上,记录下来,供以后开发时参考,相信对其他人也有用. 参考资料:stackoverflow react rou ...

  6. H5的Page Visibility API

    概述 哈哈,又学了一个H5的API.今天突然对动态获取网页的选中状态很感兴趣,然后去查了下,发现真的有个API控制它--Page Visibility API.于是把学到的东西记录下来,供以后开发时参 ...

  7. ARM架构处理器扩展结构-NEON

    是适用于ARM Cortex-A系列处理器的一种128位SIMD(Single Instruction, Multiple Data,单指令.多数据)扩展结构. 从智能手机和移动计算设备到HDTV,它 ...

  8. Testing - 软件测试知识梳理 - 软件性能测试

    软件性能测试的基本概念 软件的性能是软件的一种非功能特性,它关注的不是软件是否能够完成特定的功能,而是软件在完成该功能时展示出来的及时性. 软件性能的指标 响应时间:是指系统对请求作出响应的时间,并且 ...

  9. python基础的几个小练习题

    题目: 1.写一个程序,判断2008年是否是闰年. 2.写一个程序,用于计算2008年10月1日是这一年的第几天?(2008年1月1日是这一年的第一天) 3.(文件题)有一个“record.txt”的 ...

  10. Alienware-15-R3 装Ubuntu 16.04.3 LTS

    前言:Alienware-15-R3默认安装的系统是win10.现在卸载win0,装Ubuntu 16.04.3 LTS. 一.下载Ubuntu 16.04.3 LTS镜像文件,下载地址:https: ...