代码：
<!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. 在.NET使用JSON作为数据交换格式【转】

    http://www.cnblogs.com/zhoufoxcn/archive/2011/03/16/2515611.html 我们知道在.NET中我们有多种对象序列化的方式,如XML方式序列化.B ...

  2. 【层次查询】Hierarchical Queries之亲兄弟间的排序（ORDER SIBLINGS BY）

    http://blog.itpub.net/519536/viewspace-624176 有关层次查询之前的文章参考如下. [层次查询]Hierarchical Queries之"树的遍历 ...

  3. css3 - 动态伪类

    动态伪类分为以下几种: 1. hover(经过) 2. active(点击后) 3. focus(聚焦) - input专用 4. visited(访问后) 使用:

  4. 使用canvas 的api 实现 图片的显示 及 压缩

    在移动端压缩图片并且上传主要用到filereader.canvas 以及 formdata 这三个h5的api.逻辑并不难.整个过程就是: (1)用户使用input file上传图片的时候,用file ...

  5. jquery的一点点认识

    概述 JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 .它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, O ...

  6. gulp是用来干什么的？（概念）

    当我们在使用gulp的时候,gulp到底用来干什么呢? 编译 sass 合并优化压缩 css 校验压缩 js 优化图片 添加文件指纹(md5) 组件化头部底部(include html) 实时自动刷新 ...

  7. QQ空间g_tk、bkn加密参数算法

    g_tk是腾讯在QQ空间这一领域使用的密文,有写数据包或者url参数中需要加入你计算出的g_tk才能成功! 下面是通过浏览器抓包工具抓取 访问该js内容找出 QZONE.FrontPage.getAC ...

  8. php错误封装类

    1.创建MyErrorHandler.php文件 代码如下: <?php class MyErrorHandler { public $message; public $filename; pu ...

  9. bash 的环境配置文件

    http://www.cnblogs.com/ggjucheng/archive/2012/11/01/2750179.html bash 的环境配置文件 你是否会觉得奇怪,怎么我们什么动作都没有进行 ...

  10. nginx源代码分析--配置信息的继承&amp;合并

    这里仅仅讲述http{}模块下的配置: 在ngx_http_block()函数内(这个函数别调用时在ngx_inti_cycle内的ngx_conf_parse函数,这个函数遇到http命令时 回调n ...