代码：
<!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. npm、yarn、pnpm

    它们都是当前主流的包管理工具 pnpm:https://github.com/pnpm/pnpm yarn: https://github.com/yarnpkg/yarn npm: https:// ...

  2. 【iOS开发-58】tableView初识：5个重要方法的使用和2种样式的差别

    创建一个tableView,直接拖拽放在storyboard里面就可以. (1)先创建一个数据模型类WSCarGroup,在WSCarGroup.h文件里: #import <Foundatio ...

  3. 关于SharePoint 讨论板的一些知识

    关于SharePoint 讨论板的一些知识         近期公司项目可能要用到讨论板.需求是这种:         怎样在回复中仅仅让查看登陆者和讨论主题公布者的信息.         比方我公布 ...

  4. iOS UI08_tableView省市区字典数组

    北京 1 北京市 1 西城区 1 东城区 2 崇文区 3 宣武区 4 朝阳区 5 丰台区 6 石景山区 7 海淀区 8 门头沟区 9 房山区 10 通州区 11 顺义区 12 昌平区 13 大兴区 1 ...

  5. 怎样让Eclipse的智能提示像VS一样霸气

    说起来用Eclipse也有一段时间了.相信每个用过的人都知道他的智能提示功能真的是糟糕透了,与VisualStudio2008简直不是一个档次的!我就纳闷了,他为什么不弄好一点呢.今天我实在是忍不住了 ...

  6. OS: 读者写者问题(写者优先+LINUX+多线程+互斥量+代码)（转）

    一. 引子 最近想自己写个简单的 WEB SERVER ,为了先练练手,熟悉下在LINUX系统使用基本的进程.线程.互斥等,就拿以前学过的 OS 问题开开刀啦.记得当年学读者写者问题,尤其是写者优先的 ...

  7. ElasticSearchserver操作命令

    在win7环境,进入elasticsearch安装文件夹的bin文件夹: 1. elasticsearch.bat 就能够启动elasticsearch了.执行这个插件的优点是:elasticsear ...

  8. A20 Gate信号

    https://doc.docsou.com/ba8e6b0612d6a989b7cebeaae-5.html Gate A20 Option 功能:设置A20 地址线的控制模式 设定值:Fast 或 ...

  9. shell grep正则匹配汉字

    Shell grep正则匹配中文 测试文本 demo_exe.c,内容如下,需要注意保存的编码格式,对输出到终端有影响: 我们中文操作系统ASNI默认是GBK的. #include<stdio. ...

  10. celery模块

    Celery Celery是管理分布式任务队列的工具,其本身并不是任务队列. Celery常见概念有brokers.backend.workers.tasks. brokers:中间人,是Celery ...