代码：
<!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. ui develop

    https://developer.apple.com/library/ios/referencelibrary/GettingStarted/RoadMapiOS/DesigningaUserInt ...

  2. Android Adapter推荐写法

    package jason.fragmentdemo.adapter; import nqy.fragmentdemo.R; import nqy.fragmentdemo.model.Article ...

  3. 【转载】Websocket学习

    首先是在Tomcat里面看到Websocket的演示.很有意思. http://localhost:8080/examples/websocket/index.xhtml 里面有: Echo exam ...

  4. Ural 2018The Debut Album（DP）

    题目地址:Ural 2018 简单DP.用滚动数组. 代码例如以下: #include <iostream> #include <cstdio> #include <st ...

  5. 用C++设计一个不能被继承的类（转）

    在Java 中定义了关键字final,被final修饰的类不能被继承. 首先想到的是在C++中,子类的构造函数会自动调用父类的构造函数.同样,子类的析构函数也会自动调用父类的析构函数.要想一个类不能被 ...

  6. windows程序设计——飞机大战笔记（Access数据库的使用）

    //////////////////2015/07/22/////////////////// /////////////////by xbw ///////////////////////// // ...

  7. 获取Android屏幕尺寸、控件尺寸、状态栏/通知栏高度、导航栏高度

    1.获取Android屏幕尺寸 我们能够通过getSize()方法获得屏幕的尺寸 Display display = getWindowManager().getDefaultDisplay(); P ...

  8. <转>关于 error LNK2019：无法解析的外部符号 ，该符号在函数**中被引用的思考

    错误提示信息摘抄如下: ---------------------------------------------------------------------------------------- ...

  9. hdu5318 The Goddess Of The Moon (矩阵高速幂优化dp)

    题目:pid=5318">http://acm.hdu.edu.cn/showproblem.php?pid=5318 题意:给定n个数字串和整数m,规定若数字串s1的后缀和数字串s2 ...

  10. MySQL-获取某天的数据

    今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 近7天 DAY) <= date(时间字段名) 近30天 DAY) & ...