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. 2019-4-25 html学习笔记

    一.概念 文本   用于储存和记录文字信息的载体 html  超文本标记语言(本质就是给文本增加语义 如<h1></h1>就是给文字添加一级标题的语义) 注:互联网三大基石 有 ...

  2. Scala微服务架构 二

    三. Scala的Macro(宏) Scala Macros对scala函数库编程人员来说是一项不可或缺的编程工具,可以通过它来解决一些用普通编程或者类层次编程(type level programm ...

  3. JDBC的使用和SQL注入问题

    基本的JDBC使用: package demo; import java.sql.Connection; import java.sql.DriverManager; import java.sql. ...

  4. 闲话ajax，例ajax轮询，ajax上传文件[开发篇]

    引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...

  5. ElasticSearch权威指南学习（分布式文档存储）

    路由文档到分片 当你索引一个文档,它被存储在单独一个主分片上.Elasticsearch是如何知道文档属于哪个分片的呢?当你创建一个新文档,它是如何知道是应该存储在分片1还是分片2上的呢? 进程不能是 ...

  6. LeetCode--No.003 Longest Substring Without Repeating Characters

    Longest Substring Without Repeating Characters Total Accepted: 167158 Total Submissions: 735821 Diff ...

  7. 排序算法系列：快速排序算法JAVA版（靠谱、清晰、真实、可用、不罗嗦版）

    在网上搜索算法的博客,发现一个比较悲剧的现象非常普遍: 原理讲不清,混乱 啰嗦 图和文对不上 不可用,甚至代码还出错 为了不误人子弟耽误时间,推荐看一些靠谱的资源,如[啊哈!算法]系列: https: ...

  8. 理解 Python 的执行方式，与字节码 bytecode 玩耍 （上）

    这里有个博客讲 Python 内部机制,已经有一些中文翻译. 可能因为我用的Python 3.5,例子跑起来有些不一样. 此外,我又查了其他一些参考资料,总结如下: Python 的执行方式 先看一个 ...

  9. Xamarin.Android 获取手机IP地址

    命名空间: using System.Net; 代码: IPAddress[] address = Dns.GetHostAddresses(Dns.GetHostName()); ] != null ...

  10. Linux学习笔记之五————Linux常用命令之用户、权限管理

    一.引言 用户是Unix/Linux系统工作中重要的一环,用户管理包括用户与组账号的管理. 在Unix/Linux系统中,不论是由本机或是远程登录系统,每个系统都必须拥有一个账号,并且对于不同的系统资 ...