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. 【牛客网71E】 组一组（差分约束，拆位）

    传送门 NowCoder Solution 考虑一下看到这种区间或与区间与的关系,拆一下位. 令\(s_i\)表示前缀和,则: 那么如果现在考虑到了第\(i\)为,有如下4种可能: \(opt=1\) ...

  2. 牛客JS编程大题（一）

    1.找出元素 item 在给定数组 arr 中的位置 function indexOf(arr,item){ return arr.indexOf(item);} 2.计算给定数组 arr 中所有元素 ...

  3. PHP中字符串与html相互转化函数

    在一般通信过程中,可能会遇到文档文本编码中所不包括很多字符,或者无法在键盘上输入的字符.例如,版权符号(©).分币符号(￠)和语法重音符号等就属于这种字符.为了克服这些缺点,专门设计了一组统一的按键编 ...

  4. IPv6技术详解：基本概念、应用现状、技术实践（下篇）

    本文来自微信技术架构部的原创技术分享. 1.前言 在上篇<IPv6技术详解:基本概念.应用现状.技术实践(上篇)>,我们讲解了IPV6的基本概念. 本篇将继续从以下方面展开对IPV6的讲解 ...

  5. 谈谈我们对userAgent的看法，为什么爬虫中需要userAgent？

    首先打开浏览器,按 F12 进入控制台(Console),然后输入:navigator.userAgent,即可看到 UA.例如: 1 2 Mozilla/5.0 (Windows NT 10.0; ...

  6. python实现stack并测试

    栈(stack)又名堆栈,它是一种运算受限的线性表.其限制是仅允许在表的一端进行插入和删除运算. 这一端被称为栈顶,相对地,把另一端称为栈底.向一个栈插入新元素又称作进栈.入栈或压栈,它是把新 元素放 ...

  7. mysql快熟入门

    前提:假设我们的电脑或服务器已经正确安装了mysql服务器 一:连接和断开mysql服务器 1.1连接数据库服务器 shell> mysql -u user -p (user用户名通常为root ...

  8. hdu 6086 -- Rikka with String(AC自动机 + 状压DP)

    题目链接 Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, s ...

  9. Java：Cookie实现记住用户名、密码

    package com.gamecenter.api.util; import java.io.IOException; import java.io.PrintWriter; import java ...

  10. salesforce零基础学习（八十九）使用 input type=file 以及RemoteAction方式上传附件

    在classic环境中,salesforce提供了<apex:inputFile>标签用来实现附件的上传以及内容获取.salesforce 零基础学习(二十四)解析csv格式内容中有类似的 ...