完美的地图（使用D3.js制作精美的Web地图） _Web

本文概述

D3.js的用途是什么？
D3用于Web地图和地理数据可视化
D3的地理数据
地图库：Google Maps和Leaflet.js
投影-超越球形墨卡托
栅格地图
矢量操纵
我想要更多！

数据驱动文档或D3.js是” 用于基于数据处理文档的JavaScript库” 。或者更简单地说, D3.js是一个数据可视化库。它是由Mike Bostock开发的, 旨在弥合静态数据显示与交互式和动画数据可视化之间的差距。
D3是一个功能强大的库, 具有大量用途。在本教程中, 我将讨论D3的一个特别引人注目的应用：地图制作。我们将经历构建有用且内容丰富的网络地图的常见挑战, 并展示D3.js在每种情况下如何为有能力的JavaScript开发人员提供所需的一切, 以使地图看起来和感觉更漂亮。
D3.js的用途是什么？D3.js可以将任何任意数据绑定到文档对象模型(DOM), 然后通过使用JavaScript, CSS, HTML和SVG将转换应用于由该数据驱动的文档。结果可以是简单的HTML输出, 也可以是具有动态行为(如动画, 过渡和交互)的交互式SVG图表。所有数据转换和渲染都在客户端的浏览器中完成。
最简单的说, D3.js可用于操作DOM。这是一个简单的示例, 其中D3.js用于将段落元素添加到带有” Hello World” 文本的空文档正文中：

< !DOCTYPE html> < html> < head> < meta charset="utf-8"> < title> D3 Hello World< /title> < script src="http://img.readke.com/220517/19444KL2-0.jpg"> < /script> < /head> < body> < script type="text/javascript"> d3.select("body").append("p").text("Hello World"); < /script> < /body> < /html>

但是, D3.js的优势在于其数据可视化能力。例如, 它可用于创建图表。它可以用来创建动画图表。它甚至可以用于集成和设置不同连接图表的动画。
D3用于Web地图和地理数据可视化但是D3.js不仅可以用于DOM操作, 还可以用于绘制图表。 D3.js在处理地理信息方面非常强大。操纵和显示地理数据可能非常棘手, 但是使用D3.js构建地图非常简单。
这是一个D3.js示例, 它将基于以JSON兼容数据格式存储的数据绘制世界地图。你只需要定义地图的大小和要使用的地理投影即可(稍后会详细介绍), 定义SVG元素, 将其附加到DOM并使用JSON加载地图数据。地图样式是通过CSS完成的。

< !DOCTYPE html> < html> < head> < meta charset="utf-8"> < title> D3 World Map< /title> < style> path { stroke: white; stroke-width: 0.5px; fill: black; } < /style> < script src="http://img.readke.com/220517/19444KL2-0.jpg"> < /script> < script src="http://img.readke.com/220517/19444L539-2.jpg"> < /script> < /head> < body> < script type="text/javascript"> var width = 900; var height = 600; var projection = d3.geo.mercator(); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var path = d3.geo.path() .projection(projection); var g = svg.append("g"); d3.json("world-110m2.json", function(error, topology) { g.selectAll("path") .data(topojson.object(topology, topology.objects.countries) .geometries) .enter() .append("path") .attr("d", path) }); < /script> < /body> < /html>

相关：迈向可更新的D3.js图表
D3的地理数据对于本D3.js教程, 请记住, 地图构建最适合以JSON格式格式化的数据, 特别是GeoJSON和TopoJSON规范。
GeoJSON是” 一种用于编码各种地理数据结构的格式” 。它旨在表示离散的几何对象, 这些对象被分组为名称/值对的特征集合。
TopoJSON是GeoJSON的扩展, 可以编码拓扑, 其中几何结构是” 从称为弧的共享线段中缝合在一起的” 。 TopoJSON通过存储地理要素之间的关系信息而不仅仅是空间信息来消除冗余。结果, 几何图形更加紧凑, 并且在几何图形共享特征的地方组合在一起。与典型的GeoJSON相比, 典型的TopoJSON文件要小80％。
因此, 例如, 给定一个地图, 其中有多个国家/地区相互接壤, 则边界的共享部分将在GeoJSON中存储两次, 一次在边界两侧的每个国家/地区都存储一次。在TopoJSON中, 它将只是一行。
地图库：Google Maps和Leaflet.js如今, 最受欢迎的地图库是Google Maps和Leaflet。它们的设计目的是快速轻松地在网络上获取” 草绘地图” 。 “ 溜滑地图” 是一个术语, 指的是基于JavaScript的现代网络地图, 可在地图上进行缩放和平移。
Leaflet是Google Maps的绝佳替代品。这是一个开放源代码的JavaScript库, 旨在制作出适合移动设备的交互式地图, 同时兼顾了简单性, 性能和可用性。当利用互联网上可用的大量基于栅格的地图时, Leaflet处于最佳状态, 并带来了使用平铺地图及其呈现功能的简便性。
结合D3.js的数据处理功能以及将D3.js用于基于矢量的图形时, Leaflet可以非常成功地使用。将它们组合在一起, 可以在两个库中发挥出最佳性能。
由于Google Maps不是开源的, 因此Google Maps与D3.js的结合更加困难。可以同时使用Google Maps和D3, 但这主要限于使用D3.js在Google Maps背景地图上叠加数据。没有黑客, 实际上不可能进行更深层次的集成。
投影-超越球形墨卡托如何将三维球形地球的地图投影到二维曲面上的问题是一个古老而复杂的问题。为每张网络地图选择最佳的地图投影是一个重要的决定。
在上面的简单世界地图D3.js教程中, 我们通过调用d3.geo.mercator()使用了球形墨卡托投影坐标系。此投影也称为Web墨卡托。当Google推出Google Maps时, 这种投影方法得到了Google的广泛推广。后来, 其他Web服务也采用了投影, 即OpenStreetMap, Bing Maps, Here Maps和MapQuest。这使Spherical Mercator成为在线滑图的非常流行的投影。
所有映射库均支持开箱即用的球形墨卡托投影。如果要使用其他投影, 则需要使用Proj4js库, 该库可以进行从一个坐标系到另一个坐标系的任何转换。对于Leaflet, 有一个Proj4Leaflet插件。就Google Maps而言, 什么都没有。
D3.js内置了对许多不同地理投影的支持, 将地图投影推向了一个全新的水平。 D3.js将地理投影建模为完整的几何变换, 这意味着当直线投影到曲线时, D3.js应用可配置的自适应重采样来细分线并消除投影伪像。扩展的地理投影D3插件使支持的投影数量超过40。甚至可以使用d3.geo.projection和d3.geo.projectionMutator创建一个全新的自定义投影。
栅格地图如前所述, D3.js的主要优势之一是处理矢量数据。要使用栅格数据, 可以选择将D3.js与Leaflet结合使用。但是, 还有一个选项可以仅使用D3.js使用d3.geo.tile来创建滑溜的地图。即使仅使用D3.js, 人们也可以通过栅格地图完成出色的工作。
矢量操纵经典制图中最大的挑战之一是地图概括。你希望拥有尽可能多的详细几何图形, 但是该数据需要适应所显示地图的比例。数据分辨率太高会增加下载时间并减慢渲染速度, 而分辨率太低会破坏细节和拓扑关系。使用矢量数据的松散地图可能会遇到地图泛化的大问题。
一种选择是预先进行地图一般化：具有不同分辨率的不同数据集, 然后显示当前所选比例尺的适当数据集。但这会使数据集成倍增加, 使数据维护复杂化, 并且容易出错。但是, 大多数映射库仅限于此选项。
更好的解决方案是动态进行地图综合。 D3.js又来了, 它具有强大的数据处理功能。 D3.js允许在浏览器中简化行。
我想要更多！D3.js不容易掌握, 并且学习曲线陡峭。必须熟悉很多技术, 例如JavaScript对象, jQuery链语法, SVG和CSS, 当然还有D3的API。最重要的是, 最终需要具有一些设计技能才能创建漂亮的图形。幸运的是, D3.js拥有一个庞大的社区, 并且有很多可供人们挖掘的资源。这些教程是学习D3的一个很好的起点。
如果你喜欢通过研究示例来学习, Mike Bostock在他的网页上分享了600多个D3.js示例。所有D3.js示例都具有用于版本控制的git存储库, 并且是可存储, 可克隆和可注释的。
如果你使用的是CartoDB, 你会很高兴听到CartoDB使D3映射变得轻而易举。
最后, 我得到了一些我最喜欢的示例, 其中展示了D3的惊人功能：