前言

利用geojson文件或者类似包含对象属性和坐标（只要坐标是在统一参考系下）的文件利用SVG绘图无非是以下思路：
1、准备源数据和DOM
2、根据源数据和节点尺寸计算比例尺
3、根据比例尺重新将源坐标数据格式化到DOM对应位置
4、利用SVG绘制点（Point）、线（Poluline)、面（Polygon）等元素
工具的使用熟悉即可。这里谈一下比例尺的计算，简单思路，获取原始坐标的范围（Extent），Extent包含Xmin，Ymin,Xmax,Ymax四个坐标，再将之于DOM的范围即[[0,0],[0,height],[width,height],[width,0]]做等比换算。
而上述内容，当我们认识到D3后便知道不再需要考虑这么多细节，甚至比例尺只需要d3.scale.linear()就基本足以解决了。
话不多说，开撸。

初始化项目

先确保你已经正确安装配置了nodejs，然后随便找到你准备新建项目的文件夹，开打命令行执行以下命令：

npm init -y
npm install d3@3.5.17 --save
npm install d3-geo --save
npm install lite-server -g

安装完毕后在该文件夹下新建index.html和app.js，并添加相应的引用：

 <!--  index.html-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"><title>d3 with geoJson</title></head><body><script src="node_modules/d3//d3.min.js"> </script><script src="node_modules/d3-geo/dist/d3-geo.min.js"></script><script src="node_modules/d3-array/dist/d3-array.min.js"></script><script src="app.js"></script><style>.main {height: 800px;width: 100%;}</style><!-- 动作提示 --><div id="tips" style="bottom:100px;left: 0;position:absolute;height: 100px;width:100px"></div><!--  绘图容器 --><svg id='map' class="main"></svg><hr><!-- 操作日志 --><div id='log'></div></body>
</html>

app.js就先空着，一会再说。
新建文件夹assets,在assets下再新建文件夹geoJson，然后去下载需要的geojson文件放在这里。你的项目结构现在看来至少是这样的：

项目准备就先这样，继续往下。

获取数据并绘图

http请求数据

这里直接用原生Http方式请求数据：

const Http = new XMLHttpRequest();
var url = './assets/geoJson/china.json';
//获取Geojson文件,避免回调嵌套换行太多，这里直接返回一个promise
function getGeoData() {return new Promise(function (resolve, reject) {Http.open("get", url);Http.send();Http.onreadystatechange = function () {if (Http.readyState == 4 && Http.status == 200) {resolve(JSON.parse(Http.responseText))}}})
}

关于Http和Promise的知识可以直接点击它们跳转，此处不再赘述。

定义坐标并绘图

定义一个绘图方法，接收传入的参数并将所有元素在目标DOM节点上绘制。

var containerWidth = 0;
var containerHeight = 0;
function draw(nodes) {//墨卡托坐标系let projection = d3.geoMercator()//坐标映射projection.fitExtent([[0, 0],[containerWidth, containerHeight]], nodes);let path = d3.geoPath(projection);//绘图let polygonNode = svg.selectAll("path").data(nodes.features).enter().append("path").attr("d", path)}

回到packge.json所在文件夹，输入

lite-serve

浏览器自动打开后，这个时候你应该看到下图所示的东西：

这个看起来确实是难看了点，我们再直接用链式语法给元素定义各类属性和样式：

//链式语法定义属性和样式var polygonNode = svg.selectAll("path").data(nodes.features).enter().append("path").attr("d", path).attr("fill", "grey").attr('opacity', 0.5).attr('stroke', 'yellow').attr('stroke-width', function (d) {return 1})

当然，除了上面这些，你还可以给各元素添加事件。
完整代码和其他内容请移步我的GITHUB。

总结

简单说一下上述内容用到的东西。
1、npm新建项目
2、http请求数据（JSON）
3、d3选择器
4、d3.geo
5、其他
以上内容不过前端冰山一角，甚至对于d3.js而言也不过万中其一，且行且学。
千里之行，始于足下。

D3.js 使用geojson绘制地图相关推荐

Three.js之GeoJson 3D地图数据可视化飞行线实战
Three.js之GeoJson 3D地图数据可视化飞行线实战 GeoJSON是一种对各种地理数据结构进行编码的格式,基于Javascript对象表示法的地理空间信息数据交换格式.GeoJSON对象可 ...
d3.js 7×6 日历绘制附加单格背景
d3.js 7×6 日历绘制附加单格背景先来个效果图减少错进者的时间时间对于我们来说太宝贵了先来个效果图减少错进者的时间时间对于我们来说太宝贵了 ** 第一次写文章不喜欢请喷我您的支 ...
d3.js——箭头的绘制
首先我们要明白如何在svg中进行箭头的绘制: 先写一对<defs>,里面再写一对<marker>,其中marker的属性意义为: viewBox 坐标系的区域 refX, re ...
js 使用 canvas 绘制地图路线
使用 canvas 绘制跟随鼠标自定义路线或点使用贝塞尔曲线自动绘制示例使用 angular 可自行修改核心代码不变基础 html 参考 <div class="cont ...
leaflet 结合 d3.js 实现 geojson 数据地形剖面分析(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
three.js SVG 学习绘制三维地图
three.js SVG 学习绘制地图 https://www.js-css.cn/jscode/other/other43/ 找到一个不错的资源,不过每个省份的svg数据太小了,不精确. 主要的是这 ...
d3.js折线图_学习使用D3.js创建折线图
d3.js折线图 by Sohaib Nehal 通过Sohaib Nehal 学习使用D3.js创建折线图 (Learn to create a line chart using D3.js) 使用 ...
【 D3.js 入门系列 --- 10 】地图的绘制
地图的制作在 D3 中可以说是最重要的一环.因为在进行数据可视化时,很多情况都会和地图联系在一起,如中国各省的人口多少,GDP多少等,都可以和地图联系在一起. D3 中制作地图所需要的文件问 JSON ...
d3js mysql_使用D3.js绘制地图并打点
本篇简单介绍一下使用D3.js绘制地图,并更具经纬度在地图打点.最后根据点生成voronoi图及其三角网. 下载地图geoJson文件去网上下载要绘制地图的geoJson文件. 使用d3.json( ...

D3.js 使用geojson绘制地图