数据驱动文档，或 D3.js是“一个基于数据操作文档的JavaScript库”。. 或者更简单地说，D3.Js是一个数据可视化库. 它是由 迈克·博斯托克 这个想法弥合了静态数据显示和 互动 以及动画数据可视化.

D3是 强大的图书馆 有很多用途. 在本教程中，我将讨论D3的一个特别引人注目的应用:地图制作. 我们将讨论构建有用且信息丰富的网络地图的常见挑战, 并在每种情况下展示如何, D3.js给 熟练的JavaScript开发人员 他们需要的一切 使地图 看起来和感觉都很美.

D3是什么?.用于?

D3.js可以将任意数据绑定到文档对象模型(DOM)。, 然后, 通过使用JavaScript, CSS, HTML和SVG, 对由该数据驱动的文档应用转换. 结果可以是简单的HTML输出, 或具有动画等动态行为的交互式SVG图表, 转换, 和交互. 所有的数据转换和呈现都是在浏览器的客户端完成的.

最简单的是D3.js可以用来操作DOM. 这里有一个简单的例子，D3.js用于将段落元素添加到空文档主体中，并带有" Hello World "文本:

D3的强度.而Js则在于它的数据可视化能力. 例如，它可以用于创建 图表. 它可以用来创造 动画图表. 它甚至可以用来 整合和动画不同的连接图表.

D3用于Web地图和地理数据可视化

但D3.js不仅可以用于DOM操作，还可以用于绘制图表. D3.Js在处理方面非常强大 地理信息. 操纵和呈现地理数据可能非常棘手，但用D3构建地图就不一样了.Js很简单.

这是D3.该示例将根据存储在json兼容的数据格式中的数据绘制世界地图. 您只需要定义地图的大小和要使用的地理投影(稍后会详细介绍)。, 定义SVG元素, 将其附加到DOM, 并使用JSON加载地图数据. 地图样式化是通过CSS完成的.

D3的地理数据

对于这个D3.js教程, 请记住，使用JSON格式的数据构建地图效果最好, 特别是 GeoJSON 和 TopoJSON 规范.

GeoJSON是“一种编码各种地理数据结构的格式”。. 它被设计用来表示离散的几何对象，这些对象被分组成名称/值对的特征集合.

TopoJSON是GeoJSON的扩展, 它可以编码拓扑结构，其中几何形状“由称为弧的共享线段拼接在一起”。. TopoJSON通过存储地理特征之间的关系信息来消除冗余, 不仅仅是空间信息. 因此，几何图形在具有相同特征的地方更加紧凑和组合. 这导致典型的TopoJSON文件比其等效的GeoJSON文件小80%.

So, 例如, 给我一张地图，上面有几个国家彼此接壤, 边界的共享部分将在GeoJSON中存储两次, 边境线两边的每个国家各一次. 在TopoJSON中，它将只有一行.

地图图书馆:谷歌地图和小册子.js

今天，最流行的映射库是 谷歌地图 和 传单. 它们的设计目的是让“滑动地图”在网络上快速而简单. “滑动地图”是一个术语，指的是现代javascript驱动的web地图，它允许在地图上缩放和平移.

传单是谷歌地图的一个很好的替代品. 它是一个开源的JavaScript库，旨在制作适合移动设备的交互式地图, 与简单, 考虑性能和可用性. 当利用互联网上可用的基于栅格的地图的大选择时，传单是最好的, 并且带来了使用平铺地图及其表示功能的简单性.

当使用传单时可以取得很大的成功 与D3结合.Js的数据操作特性，以及如何利用D3.Js用于基于矢量的图形. 把它们结合在一起，就能发挥出两个图书馆的长处.

谷歌地图更难与D3结合.因为谷歌Maps不是开源的. 是可以用的 谷歌地图和D3 一起，但这主要限于用D3覆盖数据.谷歌地图背景地图. 如果没有黑客攻击，就不可能实现更深层次的集成.

投影-超越球形墨卡托

如何将三维球形地球的地图投影到二维表面上是一个难题 老而复杂的问题. 为地图选择最佳投影是每个网络地图都要做的重要决定.

在我们简单的世界地图D3中.Js教程中，我们使用了 Spherical Mercator 投影坐标系统通过调用 d3.地理.墨卡托(). 这个投影也被称为 Web墨卡托. 这个投影在b谷歌推出时得到了推广 谷歌地图. 后来，其他web服务也采用了这种投影，即 开放地图, 必应地图, 这里的地图 和 MapQuest. 这使得球面墨卡托成为一个非常受欢迎的在线滑动地图投影.

所有的映射库都支持球面墨卡托投影. 如果要使用其他投影，则需要使用 Proj4js 库，它可以执行从一个坐标系到另一个坐标系的任何转换. 在传单的情况下，有一个 Proj4传单 插件. 在谷歌Maps的例子中，什么也没有.

D3.Js将地图投影带到了一个全新的水平，它内置了对许多不同的 地理预测. D3.Js将地理投影建模为完整的几何变换, 也就是说，当直线投影到曲线上时, D3.Js应用可配置的自适应重采样来细分线条并消除投影伪影. 的 扩展地理投影D3插件 使支持的投影数量超过40个. 甚至可以创建一个全新的自定义投影 d3.地理.投影 和 d3.地理.投影Mutator.

栅格地图

如前所述，D3的主要优势之一.Js是在与矢量数据的工作. 要使用栅格数据，可以选择组合D3.js及单张. 但我们也可以选择只使用D3完成所有任务.js使用 d3.地理.瓷砖 创建 光滑的地图. 即使只有D3.只有Js，人们在做 令人惊奇的事情 使用栅格地图.

矢量操纵的飞行

经典制图中最大的挑战之一是 地图概括. 你想要有尽可能多的细节几何, 但这些数据需要适应显示地图的比例. 数据分辨率过高会增加下载时间并降低渲染速度, 而过低的分辨率会破坏细节和拓扑关系. 使用矢量数据的模糊地图在地图泛化时可能会遇到一个大问题.

一种选择是事先进行地图泛化:使用不同分辨率的不同数据集, 然后显示当前选定比例尺的适当数据集. 但是这会增加数据集，使数据维护复杂化，并且容易出错. 然而，大多数映射库仅限于此选项.

更好的解决方案是动态地进行地图泛化. 这是D3.Js，拥有强大的数据操作功能. D3.js支持 行简化要在浏览器中完成.

我想要更多!

D3.Js并不容易掌握，它有一个陡峭的学习曲线. 熟悉很多技术是必要的, 即JavaScript对象, jQuery链接语法, SVG和CSS, 当然 D3的API. 最重要的是，一个人需要有一点设计技巧，最终创造出漂亮的图像. 幸运的是,D3.Js有一个很大的社区，有很多资源可供人们挖掘. 学习D3的一个很好的起点是 这些教程.

如果你喜欢通过检查例子来学习，迈克·博斯托克分享了 600以上D3.js的例子 在他的网页上. 所有D3.Js示例有git版本控制库，并且是可分割、可克隆和可注释的.

如果你正在使用CartoDB，你会很高兴听到这个 CartoDB让D3地图变得轻而易举.

最后还有一点奖励, 以下是我最喜欢的一个例子，它展示了D3的惊人能力:

• 地球，一个用D3制作的全球动画3D风图.js. 地球是全球天气状况的可视化, 根据国家环境预测中心的超级计算机做出的天气预报, NOAA /国家气象局，并转换为JSON. 您可以自定义显示的数据，如风速读数的高度, 更改覆盖数据, 甚至改变地球投影.