D3.js 使用geojson绘制地图前言初始化项目功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入前言利用geoj...
前言
利用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
最低0.47元/天 解锁文章
7703
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
