< >头 Building Great Web Maps: A D3.. js教程| Toptal®-欧博体育app下载
®
的 World’s Top Talent, On Dem和 ®

Copyright 2010 - 2024 Toptal, LLC

\n \n \n \n \n\n\n\n

D3的强度.js, however, is in its data visualization ability. For example, it can be used 创建 图表. 它可以用来创造 动画图表. 它甚至可以用来 integrate 和 animate different connected 图表.

\n\n

D3 for Web Maps 和 Geographic Data Visualization

\n\n

但D3.js不仅可以用于DOM操作，还可以用于绘制图表. D3.js is extremely powerful when it comes to h和ling 地理信息. 操纵和呈现地理数据可能非常棘手，但用D3构建地图就不一样了.Js很简单.

\n\n

这是D3.该示例将根据存储在json兼容的数据格式中的数据绘制世界地图. 您只需要定义地图的大小和要使用的地理投影(稍后会详细介绍)。, 定义SVG元素, 将其附加到DOM, 和 load the map data using JSON. Map styling is done via CSS.

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






































\n\n
\n\n
\n相关: 迈向可更新D3.js图表\n
\n\n

D3的地理数据

\n\n

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

\n\n

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

\n\n

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

\n\n

So, 例如, given a map with several countries bordering each other, the shared parts of the borders will be stored twice in GeoJSON, once for each country on either side of the border. In TopoJSON, it will be just one line.

\n\n

Map Libraries: 谷歌地图 和 传单.js

\n\n

Today, the most popular mapping libraries are 谷歌地图 和 传单. 的y are designed to get “光滑的地图” on the web fast 和 easy. “滑动地图”是一个术语，指的是现代javascript驱动的web地图，它允许在地图上缩放和平移.

\n\n

传单 is a great alternative to 谷歌地图. 它是一个开源的JavaScript库，旨在制作适合移动设备的交互式地图, 与简单, performance 和 usability in 最小值d. 当利用互联网上可用的基于栅格的地图的大选择时，传单是最好的, 并且带来了使用平铺地图及其表示功能的简单性.

\n\n

传单 can be used with great success when 与D3结合.js’s data manipulation features，以及如何利用D3.js for vector based graphics. Combining them together brings out the best in both libraries.

\n\n

谷歌地图 are more difficult to combine with D3.js, since 谷歌地图 are not open source. 是可以用的 谷歌地图和D3 together, but this is mostly limited to overlaying data with D3.js over 谷歌地图 background maps. Deeper integration is not really possible, without hacking.

\n\n

Projections - Beyond Spherical Mercator

\n\n

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

\n\n

In our simple world map D3.js教程 above, we used the Spherical Mercator 投影 coordinate system by calling d3.地理.墨卡托(). This 投影 is also known as Web墨卡托. This 投影 was popularized by Google when they introduced 谷歌地图. Later, other web services adopted the 投影 too, namely 开放地图, 必应地图, 这里的地图 和 MapQuest. 这使得球面墨卡托成为一个非常受欢迎的在线滑动地图投影.

\n\n

所有的映射库都支持球面墨卡托投影. 如果要使用其他投影，则需要使用 Proj4js 库，它可以执行从一个坐标系到另一个坐标系的任何转换. In the case of 传单, there is a Proj4传单 插件. In the case of 谷歌地图, there is, well, nothing.

\n\n

D3.Js将地图投影带到了一个全新的水平，它内置了对许多不同的 地理预测. D3.Js将地理投影建模为完整的几何变换, which means that when straight lines are projected to curves, D3.Js应用可配置的自适应重采样来细分线条并消除投影伪影. 的 Extended Geographic Projections D3 插件 brings the number of supported 投影s to over 40. It is even possible 创建 a whole new custom 投影 using d3.地理.投影 和 d3.地理.投影Mutator.

\n\n

栅格地图

\n\n

As mentioned before, one of the main strengths of D3.js is in working with vector data. To use raster data there is an option to combine D3.js及单张. But there is also an option to do everything with just D3.js使用 d3.地理.瓷砖 创建 光滑的地图. 即使只有D3.js alone, people are doing 令人惊奇的事情 使用栅格地图.

\n\n

Vector Manipulation on the Fly

\n\n

One of the biggest challenges in classic cartography is 地图概括. You want to have as much detailed 地理metry as you can, but that data needs to adapt to the scale of the displayed map. 数据分辨率过高会增加下载时间并降低渲染速度, while too low a resolution ruins details 和 topological relations. 使用矢量数据的模糊地图在地图泛化时可能会遇到一个大问题.

\n\n

一种选择是事先进行地图泛化:使用不同分辨率的不同数据集, 然后显示当前选定比例尺的适当数据集. 但是这会增加数据集，使数据维护复杂化，并且容易出错. Yet most mapping libraries are limited to this option.

\n\n

的 better solution is to do 地图概括 on the fly. 这是D3.js again, with its powerful data manipulation features. D3.js支持 line simplification to be done in browser.

\n\n

我想要更多!

\n\n

D3.js is not easy to master 和 it has a steep learning curve. It is necessary to be familiar with a lot of technologies, namely JavaScript 对象, the jQuery chaining syntax, SVG和CSS, 当然 D3的API. 最重要的是，一个人需要有一点设计技巧，最终创造出漂亮的图像. 幸运的是,D3.Js有一个很大的社区，有很多资源可供人们挖掘. A great starting point for learning D3 is 这些教程.

\n\n

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

\n\n

If you are using CartoDB, you’ll be glad to hear that CartoDB makes D3 maps a breeze.

\n\n

And for a little bonus at the end, 以下是我最喜欢的一个例子，它展示了D3的惊人能力:

\n\n\n\n
\n相关: 面向Web开发人员的最佳在线地图工具调查:路线图\n
\n","as":"div","isContentFit":true,"sharingWidget":{"url":"http://nmp.hidekoquanyin.net/javascript/a-map-to-perfection-using-d3-js-to-make-beautiful-web-maps","title":"Building Great Web Maps: A D3.js Tutorial","text":null,"providers":["linkedin","推特","脸谱网"],"gaCategory":null,"domain":{"name":"developers","title":"工程","vertical":{"name":"developers","title":"开发人员","publicUrl":"http://nmp.hidekoquanyin.net/developers"},"publicUrl":"http://nmp.hidekoquanyin.net/developers/blog"},"hashtags":"JavaScript,D3.js,WebMaps,GeographicalInformationSystems,制图学"}}> < /脚本