>头
Tomislav(硕士)在全栈开发和数据分析方面有超过15年的经验, 但地理空间可视化是他的最爱.
数据驱动文档,或 D3.js是“一个基于数据操作文档的JavaScript库”。. 或者更简单地说,D3.Js是一个数据可视化库. 它是由 迈克·博斯托克 这个想法弥合了静态数据显示和 互动 以及动画数据可视化.
D3是 强大的图书馆 有很多用途. 在本教程中,我将讨论D3的一个特别引人注目的应用:地图制作. 我们将讨论构建有用且信息丰富的网络地图的常见挑战, 并在每种情况下展示如何, D3.js给 熟练的JavaScript开发人员 他们需要的一切 使地图 看起来和感觉都很美.
D3.js可以将任意数据绑定到文档对象模型(DOM)。, 然后, 通过使用JavaScript, CSS, HTML和SVG, 对由该数据驱动的文档应用转换. 结果可以是简单的HTML输出, 或具有动画等动态行为的交互式SVG图表, 转换, 和交互. 所有的数据转换和呈现都是在浏览器的客户端完成的.
最简单的是D3.js可以用来操作DOM. 这里有一个简单的例子,D3.js用于将段落元素添加到空文档主体中,并带有" Hello World "文本:
D3 Hello World
D3的强度.而Js则在于它的数据可视化能力. 例如,它可以用于创建 图表. 它可以用来创造 动画图表. 它甚至可以用来 整合和动画不同的连接图表.
但D3.js不仅可以用于DOM操作,还可以用于绘制图表. D3.Js在处理方面非常强大 地理信息. 操纵和呈现地理数据可能非常棘手,但用D3构建地图就不一样了.Js很简单.
这是D3.该示例将根据存储在json兼容的数据格式中的数据绘制世界地图. 您只需要定义地图的大小和要使用的地理投影(稍后会详细介绍)。, 定义SVG元素, 将其附加到DOM, 并使用JSON加载地图数据. 地图样式化是通过CSS完成的.
D3 World Map
对于这个D3.js教程, 请记住,使用JSON格式的数据构建地图效果最好, 特别是 GeoJSON 和 TopoJSON 规范.
GeoJSON是“一种编码各种地理数据结构的格式”。. 它被设计用来表示离散的几何对象,这些对象被分组成名称/值对的特征集合.
TopoJSON是GeoJSON的扩展, 它可以编码拓扑结构,其中几何形状“由称为弧的共享线段拼接在一起”。. TopoJSON通过存储地理特征之间的关系信息来消除冗余, 不仅仅是空间信息. 因此,几何图形在具有相同特征的地方更加紧凑和组合. 这导致典型的TopoJSON文件比其等效的GeoJSON文件小80%.
So, 例如, 给我一张地图,上面有几个国家彼此接壤, 边界的共享部分将在GeoJSON中存储两次, 边境线两边的每个国家各一次. 在TopoJSON中,它将只有一行.
今天,最流行的映射库是 谷歌地图 和 传单. 它们的设计目的是让“滑动地图”在网络上快速而简单. “滑动地图”是一个术语,指的是现代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的惊人能力:
世界级的文章,每周发一次.
世界级的文章,每周发一次.