d3.js是一个比較强的数据可视化js工具。

利用它画了一幅中国地图，例如以下图所看到的：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3ZhcDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

源代码例如以下：

<!DOCTYPE html>

<html>

  <head>

    <script type="text/javascript" src="d3.js"></script>

    <script type="text/javascript" src="d3.csv.js"></script>

    <script type="text/javascript" src="d3.geo.js"></script>

    <script type="text/javascript" src="d3.geom.js"></script>

  </head>

  <body>

  <div id='map'></div>

    <script type="text/javascript">

var w = 1280,

    h = 800;

var projection = d3.geo.azimuthal()//  //mercator()

    //.mode("equidistant")

    //.origin([-98, 38])

    //.scale(1400)

    //.translate([640, 360]);

	.mode("equidistant")

    .origin([107, 32])///???

    .scale(1000)

    .translate([w/2, h/2]);

var path = d3.geo.path()

    .projection(projection);

var svg = d3.select("#map").insert("svg:svg")

	//.append('svg')//

    .attr("width", w)

    .attr("height", h);

var states = svg.append("svg:g")

    .attr("id", "states");

var circles = svg.append("svg:g")

    .attr("id", "circles");

var texts = svg.append("svg:g")

	.attr("id", "texts");

var cells = svg.append("svg:g")

    .attr("id", "cells");

d3.json("china.json", function(collection) {

  states.selectAll("path")

      .data(collection.features)

    .enter().append("svg:path")

      .attr("d", path)

	  .attr('fill','#ddd')

	  .attr('stroke','#222')

	  .attr('stroke-width','1px')

	  ;

});

var positions=[];

d3.csv('china-cities.csv',function(c){

	circles.selectAll("circle")

        .data(c)

        .enter().append("svg:circle")

        .attr("cx", function(d,i){return projection([d.lon,d.lat])[0];})

        .attr("cy",function(d,i){return projection([d.lon,d.lat])[1];})

		.attr("r", 3)

		.attr('fill','red');

	texts.selectAll("text")

		.data(c)

		.enter().append("svg:text")

		.text(function(d){return d.city;})

		.attr("x", function(d){

			var local=projection([d.lon,d.lat]);

			if(d.lon=='113.5575191')//处理澳门

			return (local[0]-30);

			else return local[0];})

        .attr("y",function(d){

			var local=projection([d.lon,d.lat]);

			if(d.lat=='39.1439299') return (local[1]+10);//处理天津

			else return local[1];

			})

		.attr('fill','#000')

		.attr('font-size','14px')

		;

});

    </script>

  </body>

</html>

利用d3.js绘制中国地图的更多相关文章

  1. 利用d3.js绘制雷达图

    利用d3,js将数据可视化,能够做到数据与代码的分离.方便以后改动数据. 这次利用d3.js绘制了一个五维的雷达图.即将多个对象的五种属性在一张图上对照. 数据写入data.csv.数据类型写入typ ...

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

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

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

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

  4. D3.js 制作中国地图

    from:  http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding a variety of ...

  5. matlab利用m_map工具包画中国地图及散点云图

    开始之前需要准备好malab,中国地图shp文件,m_map工具包. 中国地图shp文件可以在下面的链接中下载: https://gadm.org/download_country_v3.html 本 ...

  6. Android 绘制中国地图

    最近的版本有这样一个需求: 有 3 个要素: 中国地图 高亮省区 中心显示数字 面对这样一个需求,该如何实现呢? 高德地图 因为项目是基于高德地图来做的,所以很自然而然的想到了高德.但是当查阅高德地图 ...

  7. 用matlab绘制中国地图

    reference:https://jingyan.baidu.com/article/870c6fc36fdacfb03ee4be58.html shp: http://muchong.com/ht ...

  8. 利用Matlab快速绘制栅格地图

    代码演示 % 基于栅格地图的机器人路径规划算法 % 第1节:利用Matlab快速绘制栅格地图 clc clear close all %% 构建颜色MAP图 cmap = [1 1 1; ... % ...

  9. D3.JS V4 绘制中国地图

    参考:http://bl.ocks.org/almccon/fe445f1d6b177fd0946800a48aa59c71 http://blog.csdn.net/lzhlzz/article/d ...

随机推荐

  1. 在Eclipse中使用JDBC访问MySQL数据库的配置方法

    在Eclipse中使用JDBC访问MySQL数据库的配置方法 分类: DATABASE 数据结构与算法2009-10-10 16:37 5313人阅读 评论(10) 收藏 举报 jdbcmysql数据 ...

  2. 使用python操作RabbitMQ,Redis,Memcache,SQLAlchemy 其二

    一.概念 1.Memcached     Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态 ...

  3. C++堆和栈的比较（7个区别）

    基础知识: 堆 栈是一种简单的数据结构,是一种只允许在其一端进行插入或删除的线性表.允许插入或删除操作的一端称为栈顶,另一端称为栈底,对堆栈的插入和删除操作被称 为入栈和出栈.有一组CPU指令可以实现 ...

  4. Logback相关知识汇总

    例如:%-4relative 表示,将输出从程序启动到创建日志记录的时间 进行左对齐 且最小宽度为4格式修饰符,与转换符共同使用:可选的格式修饰符位于“%”和转换符之间.第一个可选修饰符是左对齐 标志 ...

  5. BZOJ 3282: Tree( LCT )

    LCT.. -------------------------------------------------------------------------------- #include<c ...

  6. Appium 服务命令行参数

    Appium  可以直接通过命令行启动,同样支持命令行参数配置 参考: http://appium.io/slate/cn/master/ 使用方法 例如: appium  --shell 服务器标志 ...

  7. JVM -- CMS

    并发的标记—清除(Concurrent Mark Sweep,缩写为 CMS)收集器,使得在整个收集的过程中只是很短的暂停应用的执行,可通过在 JVM 参数中设置-XX:UseConcMarkSwee ...

  8. Tri_integral Summer Training 8 总结

    比赛链接 题目 B C E F G I 这是孟加拉国的区域赛. 开场ss读懂了c发现是个水题,于是去敲,结果手贱wa了一炮,不过很快就修正了错误.B题过了不少,我去读,发现是个水题,意识让Moor敲. ...

  9. 基于visual Studio2013解决算法导论之054图的邻接矩阵表示

     题目 图的邻接矩阵表示 解决代码及点评 // 图的邻接矩阵表示.cpp : 定义控制台应用程序的入口点. // #include <iostream> #include <l ...

  10. 在cmd窗口中查询android的sqlite3数据库表之步骤

    本文主要是写了一个android程序对sqlite3中数据库的employee表的插入.删除的操作,然后在cmd窗口中用sql命令查询employee表的操作过程. 1.第一步:首先把程序写好. 1. ...