代码：
<!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. openfire Android学习(二)----对分组、好友和头像等一些操作

    一.查询所有分组 通过Roster来获取所有分组,Roster可以通过connection.getRoster()来得到. [java] view plaincopy /** * 获取所有组 * *  ...

  2. MFC office2007风格设置左侧导航栏 [转]

    当基础的框架搭好以后,我想为其添加一个左侧导航栏,过程如下:在框架类的头文件添加一个导航栏参数: CMFCOutlookBar m_navigation; 为了完善功能,在导航栏里面我添加了一个CTr ...

  3. HashMap 和 Hashtable 的同和不同

    综述 可以直接根据 hashcode 值判断两个对象是否相等吗?肯定是不可以的,因为不同的对象可能会生成相同的 hashcode 值.虽然不能根据 hashcode 值判断两个对象是否相等,但是可以直 ...

  4. PS 如何制作柔和的边框

    柔和边框制作 1 新建一个图层,按填充为黑色.(填充当前图层为前景色 A/T+Delete 背景色 CTRL+Delete),不透明度设为60%.混合模式为正片叠底,   2 选择椭圆选择一片区域(也 ...

  5. struts1.3中使用DispatchAction的一个问题

    近期做项目发现我们公司的项目是用struts1写的,在多方百度下,总有理解了struts1.3的DispatchAction的使用方法 一:struts.xml文件的配置 <?xml versi ...

  6. vue-router篇

    目录结构: -lib-vue.js -lib-vue-router.js -js-main.js -index.html 1.安装和基本配置 2.传参以及获取传参 3.子路由 4.手动访问和传参 5. ...

  7. 一起学android之怎样卸载指定的 应用程序（25）

    效果图例如以下: 代码例如以下: public class MainActivity extends Activity { private Button btn_delete; @Override p ...

  8. tomcat 7安装

    JAVA环境安装 1.下载包 http://download.oracle.com/otn/java/jdk/6u45-b06/jdk-6u45-linux-x64.bin 2.安装 jdk-6u45 ...

  9. 五、WEB框架基础（1）

    框架与架构 Python语言有很多web框架,主要是四个,企业级框架Django,高并发处理框架Tornado,快速开发框架Flask,自定义协议框架Twisted. 全栈网络框架封装了网络通信/线程 ...

  10. linux快捷键及主要命令（转载）

    作者:幻影快递Linux小组 翻译 2004-10-05 22:03:01 来自:Linux新手管理员指南(中文版) 5.1 Linux基本的键盘输入快捷键和一些常用命令 5.2 帮助命令 5.3 系 ...