代码：
  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <style>
  4.  
  5.     .states :hover {
  6.         fill: red;
  7.         stroke-width: 2px;
  8.     }
  9.  
  10.     .state-borders {
  11.         fill: none;
  12.         stroke: #fff;
  13.         stroke-width: 0.5px;
  14.         stroke-linejoin: round;
  15.         stroke-linecap: round;
  16.         pointer-events: none;
  17.     }
  18.  
  19. </style>
  20. <svg width="1200" height="800" style="border:1px gainsboro solid"></svg>
  21. <script src="https://d3js.org/d3.v4.min.js"></script>
  22. <script src="https://d3js.org/topojson.v2.min.js"></script>
  23. <script src="jquery-1.12.1.min.js"></script>
  24.  
  25. <script>
  26.  
  27.     var svg = d3.select("svg"),
  28.             width = svg.attr("width"),
  29.             height = svg.attr("height");
  30.  
  31.     var projection = d3.geoMercator()
  32.             .center([107, 31])
  33.             .scale(950)
  34.             .translate([width/2, height/2+height/6])
  35.     var path = d3.geoPath()
  36.             .projection(projection);
  37.  
  38.     d3.json("china.json", function(error, us) {
  39.         if (error) throw error;
  40.  
  41.         svg.append("g")
  42.                 .attr("class", "states")
  43.                 .selectAll("path")
  44. //                .data(topojson.feature(us, us.objects.states).features)
  45.                 .data(us.features)
  46.                 .enter().append("path")
  47.                 .attr('stroke','white')
  48.                 .attr('fill','lightgray')
  49.                 .attr("d", path)
  50.                 .append('title')
  51.                 .text(function(d){
  52.                     a=d
  53.                     return d.properties.name
  54.                 });
  55.  
  56.         svg.append("path")
  57.                 .attr("class", "state-borders")
  58.                 .attr("d", path(topojson.mesh(us, us, function(a, b) { return a !== b; })));
  59.  
  60.         a={"value":[{"BusStopCode":"01012","RoadName":"Victoria St","Description":"Hotel Grand Pacific","Latitude":29.160752671000068,"Longitude":113.56942793100006 }]}
  61.         svg.selectAll("circle")
  62.                 .data(a.value).enter().append("circle")
  63.                 .attr('stroke','red')
  64.                 .attr('fill','green')
  65.                 .attr("d", path)
  66.                 .attr("r", 2)
  67.                 .attr("transform", function(d) {
  68.                     return "translate(" + projection([
  69.                                 d.Longitude,
  70.                                 d.Latitude
  71.                             ]) + ")";
  72.                 })
  73.                 .append('title')
  74.                 .text(function(d){
  75.                     a=d
  76.                     return d.BusStopCode
  77.                 });
  78.     });
  79.  
  80. </script>

　　

 
 
从http://blog.csdn.net/lzhlzz/article/details/41347929 中下载的地理信息的中国JSON文件绘制得到的图如下：
     

 
与正常的中国地图相比，可以发现西藏那一块缺了存在争议的某一部分，关于这个，我们，当然是要加上去的。。。
新的china.json数据连接在这http://files.cnblogs.com/files/combfish/china.zip，得到的图如下：
 
 

 

D3.JS V4 绘制中国地图的更多相关文章

  1. 用matlab绘制中国地图

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

  2. Android 绘制中国地图

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

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

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

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

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

  5. R绘制中国地图，并展示流行病学数据

    流行病学的数据讲究“三间分布”,即人群分布.时间分布和空间分布.其中的“空间分布”最好是在地图上展示,才比较清楚.R软件集统计分析与高级绘图于大成,是最适合做这项工作了.关于地图的绘制过程,谢益辉.邱 ...

  6. 用echarts绘制中国地图

    在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...

  7. echarts 如何在世界地图中绘制中国地图

    1.导入 world.china.js  这个js是将world.js 文件 以及china.js文件进行合并 (网上一些中国地图勾勒的身份曲线感觉很飘  所以自己加工了一下china.js中的数据, ...

  8. 基于D3JS绘制中国地图

    仿照D3JS官网上的美国地图制作了一个中国版的地图. D3JS官网上的版本: http://bl.ocks.org/NPashaP/a74faf20b492ad377312 中国版的地图效果: 如要制 ...

  9. d3.js v4曲线图的拖拽功能实现Zoom

    zoom缩放案例 源码:https://github.com/HK-Kevin/d...:demo:https://hk-kevin.github.io/d3...: 原理:通过zoom事件来重新绘制 ...

随机推荐

  1. GitHub+Octopress搭建免费blog

    生成github公钥 检查ssh公钥设置: 如果id_rsa*文件不存在,跳到第三步: $ cd .ssh $ ls 备份原来的ssh key: 备份旧数据,备份后删除旧数据: $ mkdir key ...

  2. iOS -- SKPhysicsJointSpring类

    SKPhysicsJointSpring类 继承自 NSObject 符合 NSCoding(SKPhysicsJoint)NSObject(NSObject) 框架  /System/Library ...

  3. Delphi图像处理 -- 颜色矩阵变换

    转载自阿发伯:http://blog.csdn.net/maozefa/article/details/8316430 阅读提示:     <Delphi图像处理>系列以效率为侧重点,一般 ...

  4. 构建基于Javascript的移动web CMS——Hello,World

    在一篇构建基于Javascript的移动web CMS入门--简单介绍中简单的介绍了关于墨颀CMS的一些原理,其极框架组成.于是開始接着应该说明一下这个CMS是怎样一步步搭建起来. RequireJS ...

  5. （全然背包）小P寻宝记——好基友一起走

    题目描写叙述 话说.上次小P到伊利哇呀国旅行得到了一批宝藏.他是相当开心啊.回来就告诉了他的好基友小鑫.于是他们又结伴去伊利哇呀国寻宝. 这次小P的寻宝之路可没有那么的轻松,他们走到了一个森林,小鑫一 ...

  6. 系统安全-PAM

    Pluggable Authentication Modules(可插入验证模块,简称PAM) Linux-PAM(Pluggable Authentication Modules for Linux ...

  7. kubernetes对象之Ingress

    系列目录 概述 向外网暴露集群内服务,以使客户端能够访问,有以下几种方法,本文重点描述Ingress. LoadBalancer LoadBalancer一般由云服务供应商提供或者用户自定义,运行在集 ...

  8. libraries_v140_x64_py35_1.0.1.tar.bz2 libraries_v120_x64_py27_1.1.0.tar 下载链接以及百度云下载链接

    下载链接 wget  -c  https://github.com/willyd/caffe-builder/releases/download/v1.0.1/libraries_v140_x64_p ...

  9. Caffe学习系列(12)：训练和测试自己的图片--linux平台

    Caffe学习系列(12):训练和测试自己的图片   学习caffe的目的,不是简单的做几个练习,最终还是要用到自己的实际项目或科研中.因此,本文介绍一下,从自己的原始图片到lmdb数据,再到训练和测 ...

  10. 简化Android的startActivityForResult调用

    一个是解决在onActivityResult 中判断requestCode的问题,第二个是让调用代码的地方就知道我是如何处理对方activity 的返回的. 首先我们有一个ResultActivity ...