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. MySQL常用内置变量

      MySQL用很多常用的内置变量,掌握这些内置变量后对于我们快速获取当前MySQL的配置有很大帮助,下面就来列举几个常用的变量. 查看当前MySQL版本号信息.show variables like ...

  2. iOS架构模式浅析

    这是以前旧博客在13年规划写的一个系列,写了一部分内容,还没有完成.现在重新整理编写.计划从基础知识六大设计原则.设计模式中类的关系开始,然后会对iOS开发中的常用架构模式进行介绍,最后对GoF的23 ...

  3. WITH RECOMPILE 和 OPTION(RECOMPILE) 使用上的区别

    在考虑重编译T-SQL(或者存储过程)的时候,有两种方式可以实现强制重编译(前提是忽略导致重编译的其他因素的情况下,比如重建索引,更新统计信息等等), 一是基于WITH RECOMPILE的存储过程级 ...

  4. Visual Studio 2017中使用正则修改部分内容

    最近在项目中想实现一个小工具,需要根据类的属性<summary>的内容加上相应的[Description]特性,需要实现的效果如下 修改前: /// <summary> /// ...

  5. InstallShield 创建 visual studio 工程的时候 指向 任意 visual studio 版本 方法 (修改 计算机 默认 visual studio shell 版本)

    这需要 修改 计算机 默认 visual studio shell 版本 注册表 HKEY_CLASSES_ROOT VisualStudio.DTE 配置节点 描述的是 默认的 visual stu ...

  6. ng 的 ng-repeat（对象） 把对象的 key 和value 都拿出来 循环

    对象的repeat  是这种形式

  7. 通俗理解N-gram语言模型。（转）

    从NLP的最基础开始吧..不过自己看到这里,还没做总结,这里有一篇很不错的解析,可以分享一下. N-gram语言模型 考虑一个语音识别系统,假设用户说了这么一句话:“I have a gun”,因为发 ...

  8. Linux pwn入门教程(2)——shellcode的使用，原理与变形

    作者:Tangerine@SAINTSEC 0×00 shellcode的使用 在上一篇文章中我们学习了怎么使用栈溢出劫持程序的执行流程.为了减少难度,演示和作业题程序里都带有很明显的后门.然而在现实 ...

  9. Redis主从和集群

    主从概念 一个master可以拥有多个slave,一个slave又可以拥有多个slave.如此下去,形成了强大的多级服务器集群架构. master用写数据,经统计:网站的读写比率是10:1 通过主从分 ...

  10. vue父子组件传递参数之props

    vue中父组件通过props传递数据给子组件, props有两种传递方式 1.props:['msg']2.props: { msg:{ type:String, default:"&quo ...