代码：
<!DOCTYPE html>

<meta charset="utf-8">

<style>

    .states :hover {

        fill: red;

        stroke-width: 2px;

    }

    .state-borders {

        fill: none;

        stroke: #fff;

        stroke-width: 0.5px;

        stroke-linejoin: round;

        stroke-linecap: round;

        pointer-events: none;

    }

</style>

<svg width="1200" height="800" style="border:1px gainsboro solid"></svg>

<script src="https://d3js.org/d3.v4.min.js"></script>

<script src="https://d3js.org/topojson.v2.min.js"></script>

<script src="jquery-1.12.1.min.js"></script>

<script>

    var svg = d3.select("svg"),

            width = svg.attr("width"),

            height = svg.attr("height");

    var projection = d3.geoMercator()

            .center([107, 31])

            .scale(950)

            .translate([width/2, height/2+height/6])

    var path = d3.geoPath()

            .projection(projection);

    d3.json("china.json", function(error, us) {

        if (error) throw error;

        svg.append("g")

                .attr("class", "states")

                .selectAll("path")

//                .data(topojson.feature(us, us.objects.states).features)

                .data(us.features)

                .enter().append("path")

                .attr('stroke','white')

                .attr('fill','lightgray')

                .attr("d", path)

                .append('title')

                .text(function(d){

                    a=d

                    return d.properties.name

                });

        svg.append("path")

                .attr("class", "state-borders")

                .attr("d", path(topojson.mesh(us, us, function(a, b) { return a !== b; })));

        a={"value":[{"BusStopCode":"01012","RoadName":"Victoria St","Description":"Hotel Grand Pacific","Latitude":29.160752671000068,"Longitude":113.56942793100006 }]}

        svg.selectAll("circle")

                .data(a.value).enter().append("circle")

                .attr('stroke','red')

                .attr('fill','green')

                .attr("d", path)

                .attr("r", 2)

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

                    return "translate(" + projection([

                                d.Longitude,

                                d.Latitude

                            ]) + ")";

                })

                .append('title')

                .text(function(d){

                    a=d

                    return d.BusStopCode

                });

    });

</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. Android自定义控件之自定义组合控件（三）

    前言: 前两篇介绍了自定义控件的基础原理Android自定义控件之基本原理(一).自定义属性Android自定义控件之自定义属性(二).今天重点介绍一下如何通过自定义组合控件来提高布局的复用,降低开发 ...

  2. IDEA Java/Scala混合项目maven打包

    1.首先创建maven项目 2.创建成功后新建class,只有java的,没有scala的 3.修改pom.xml文件,引入scala <?xml version="1.0" ...

  3. 转： How to Install MongoDB 3.2 on CentOS/RHEL & Fedora （简单易懂）

    from:  http://tecadmin.net/install-mongodb-on-centos-rhel-and-fedora/ MongoDB (named from “huMONGOus ...

  4. Unity3D：Gizmos画圆（原创）

    Unity3D引擎技术交流QQ群:[21568554] Gizmos是场景视图里的一个可视化调试工具. 在做项目过程中.我们常常会用到它,比如:绘制一条射线等. Unity3D 4.2版本号截至.眼下 ...

  5. vue class绑定 组件

    当在一个自定义组件上使用 class 属性时,这些类将被添加到该组件的根元素上面.这个元素上已经存在的类不会被覆盖. 例如,如果你声明了这个组件: Vue.component('my-componen ...

  6. C语言-回溯例1

    回溯法解N皇后问题 1,代码分析: 使用一个一维数组表示皇后的位置 其中数组的下标表示皇后所在的行 数组元素的值表示皇后所在的列 这样设计的棋盘,所有皇后必定不在同一行 假设前n-1行的皇后已经按照规 ...

  7. mysql大数据量下修改表结构的方法

    http://www.blogjava.net/anchor110/articles/361152.html

  8. [RFC] Simplifying kernel configuration for distro issues

    http://lwn.net/Articles/507276/ From: Linus Torvalds <torvalds-de/tnXTf+JLsfHDXvbKv3WD2FQJk+8+b-A ...

  9. 升级OpenSSL修复高危漏洞Heartbleed

    升级OpenSSL修复高危漏洞Heartbleed 背景:          OpenSSL全称为Secure Socket Layer.是Netscape所研发.利用数据加密(Encryption) ...

  10. （转）Java web 项目中文件路径

    文件路径分为绝对路径和相对路径,在项目中页面跳转.配置文件读写.文件上传下载等等许多地方都涉及到文件路径问题. 一篇好文转载于此:http://blog.csdn.net/shendl/archive ...