作者都是各自领域经过审查的专家，并撰写他们有经验的主题. 我们所有的内容都经过同行评审，并由同一领域的Toptal专家验证.
Tomislav Bacinger

Tomislav Bacinger

20

Tomislav(硕士)在全栈开发和数据分析方面有超过15年的经验, 但地理空间可视化是他的最爱.

Share

数据驱动文档，或 D3.js是“一个基于数据操作文档的JavaScript库”。. 或者更简单地说，D3.Js是一个数据可视化库. It was developed by Mike Bostock 这个想法弥合了静态数据显示和 interactive 以及动画数据可视化.

D3 is a powerful library with a ton of uses. 在本教程中，我将讨论D3的一个特别引人注目的应用:地图制作. 我们将讨论构建有用且信息丰富的网络地图的常见挑战, 并在每种情况下展示如何, D3.js gives 熟练的JavaScript开发人员 everything they need to make maps look and feel beautiful.

What is D3.js used for?

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

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



  
    
    D3 Hello World

The strength of D3.而Js则在于它的数据可视化能力. 例如，它可以用于创建 charts. It can be used to create animated charts. It can be even used to 整合和动画不同的连接图表.

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

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

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



  
    
    D3 World Map
Related: Towards Updatable D3.js Charts

Geographic Data for D3

For this D3.js tutorial, 请记住，使用JSON格式的数据构建地图效果最好, particularly the GeoJSON and TopoJSON specifications.

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

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

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

地图图书馆:谷歌地图和传单.js

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

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

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

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

投影-超越球形墨卡托

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

在我们简单的世界地图D3中.Js教程中，我们使用了 Spherical Mercator 投影坐标系统通过调用 d3.geo.mercator(). 这个投影也被称为 Web Mercator. 这个投影是由谷歌推广的 Google Maps. 后来，其他web服务也采用了这种投影，即 OpenStreetMap, Bing Maps, Here Maps and MapQuest. 这使得球面墨卡托成为一个非常受欢迎的在线滑动地图投影.

所有的映射库都支持球面墨卡托投影. 如果要使用其他投影，则需要使用 Proj4js 库，它可以执行从一个坐标系到另一个坐标系的任何转换. 在传单的情况下，有一个 Proj4Leaflet plugin. 就谷歌地图而言，什么都没有.

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

Raster Maps

如前所述，D3的主要优势之一.Js是在与矢量数据的工作. 要使用栅格数据，可以选择组合D3.js with Leaflet. 但我们也可以选择只使用D3完成所有任务.js using d3.geo.tile to create slippy maps. Even with just D3.只有Js，人们在做 amazing things with raster maps.

矢量操纵的飞行

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

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

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

I want more!

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

如果你喜欢通过检查例子来学习，Mike Bostock分享了 more than 600 D3.js examples on his webpage. All D3.Js示例有git版本控制库，并且是可分割、可克隆和可注释的.

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

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

  • earth，一个用D3制作的全球动画3D风图.js. 地球是全球天气状况的可视化, 根据国家环境预测中心的超级计算机做出的天气预报, NOAA /国家气象局，并转换为JSON. 您可以自定义显示的数据，如风速读数的高度, change overlaid data, 甚至改变地球投影.
Related: 面向Web开发人员的最佳在线地图工具调查:路线图

Tags

聘请Toptal这方面的专家.
Hire Now
Tomislav Bacinger

Tomislav Bacinger

20

About the author

Tomislav(硕士)在全栈开发和数据分析方面有超过15年的经验, 但地理空间可视化是他的最爱.

世界级的文章，每周发一次.

订阅意味着同意我们的 privacy policy

世界级的文章，每周发一次.

订阅意味着同意我们的 privacy policy

Toptal Developers

Join the Toptal® community.

Hire a Developer or Apply as a Developer
\n \n \n \n \n\n\n\n

The strength of D3.而Js则在于它的数据可视化能力. 例如，它可以用于创建 charts. It can be used to create animated charts. It can be even used to 整合和动画不同的连接图表.

\n\n

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

\n\n

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

\n\n

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

\n\n
\n\n  \n    \n    D3 World Map\n    \n    \n    \n  \n  \n    \n  






































\n\n
\n\n
\nRelated: Towards Updatable D3.js Charts\n
\n\n

Geographic Data for D3

\n\n

For this D3.js tutorial, 请记住，使用JSON格式的数据构建地图效果最好, particularly the GeoJSON and TopoJSON specifications.

\n\n

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

\n\n

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

\n\n

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

\n\n

地图图书馆:谷歌地图和传单.js

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

投影-超越球形墨卡托

\n\n

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

\n\n

在我们简单的世界地图D3中.Js教程中，我们使用了 Spherical Mercator 投影坐标系统通过调用 d3.geo.mercator(). 这个投影也被称为 Web Mercator. 这个投影是由谷歌推广的 Google Maps. 后来，其他web服务也采用了这种投影，即 OpenStreetMap, Bing Maps, Here Maps and MapQuest. 这使得球面墨卡托成为一个非常受欢迎的在线滑动地图投影.

\n\n

所有的映射库都支持球面墨卡托投影. 如果要使用其他投影，则需要使用 Proj4js 库，它可以执行从一个坐标系到另一个坐标系的任何转换. 在传单的情况下，有一个 Proj4Leaflet plugin. 就谷歌地图而言，什么都没有.

\n\n

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

\n\n

Raster Maps

\n\n

如前所述，D3的主要优势之一.Js是在与矢量数据的工作. 要使用栅格数据，可以选择组合D3.js with Leaflet. 但我们也可以选择只使用D3完成所有任务.js using d3.geo.tile to create slippy maps. Even with just D3.只有Js，人们在做 amazing things with raster maps.

\n\n

矢量操纵的飞行

\n\n

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

\n\n

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

\n\n

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

\n\n

I want more!

\n\n

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

\n\n

如果你喜欢通过检查例子来学习，Mike Bostock分享了 more than 600 D3.js examples on his webpage. All D3.Js示例有git版本控制库，并且是可分割、可克隆和可注释的.

\n\n

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

\n\n

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

\n\n\n\n
\nRelated: 面向Web开发人员的最佳在线地图工具调查:路线图\n
\n","as":"div","isContentFit":true,"sharingWidget":{"url":"http://4w6c.dh865.com/javascript/a-map-to-perfection-using-d3-js-to-make-beautiful-web-maps","title":"构建伟大的网络地图:D3.js Tutorial","text":null,"providers":["linkedin","twitter","facebook"],"gaCategory":null,"domain":{"name":"developers","title":"Engineering","vertical":{"name":"developers","title":"Developers","publicUrl":"http://4w6c.dh865.com/developers"},"publicUrl":"http://4w6c.dh865.com/developers/blog"},"hashtags":"JavaScript,D3.js,WebMaps,GeographicalInformationSystems,Cartography"}}