< >头 构建伟大的网络地图:D3.. js教程| Toptal®-欧博体育app下载
®
世界顶尖人才，点播 ®

Toptal, LLC版权所有

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

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

\n\n

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

\n\n

但D3.js can be used for much more than just DOM manipulation, or to draw 图表. D3.Js在处理方面非常强大 地理信息. Manipulating 和 presenting 地理graphic data can be very tricky, but building a map with a D3.Js很简单.

\n\n

这是D3.js example that will draw a world map based on the data stored in a JSON-compatible data format. You just need to define the size of the map 和 the 地理graphic 投影 to use (more about that later), 定义SVG元素, 将其附加到DOM, 并使用JSON加载地图数据. 地图样式化是通过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教程, keep in 最小值d that map building works best with data formatted in JSON formats, 特别是 GeoJSON 和 TopoJSON 规范.

\n\n

GeoJSON is “a format for encoding a variety of 地理graphic data structures”. It is designed to represent discrete 地理metry 对象 grouped into feature collections of name/value pairs.

\n\n

TopoJSON是GeoJSON的扩展, which can encode topology where 地理metries are “stitched together from shared line segments called arcs”. TopoJSON eli最小值ates redundancy by storing relational information between 地理graphic features, 不仅仅是空间信息. As a result, 地理metry is much more compact 和 combined where 地理metries share features. This results with 80% smaller typical TopoJSON file than its GeoJSON equivalent.

\n\n

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

\n\n

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

\n\n

今天，最流行的映射库是 谷歌地图 和 传单. 它们的设计目的是让“滑动地图”在网络上快速而简单. “Slippy maps” is a term referring to modern JavaScript-powered web maps that allow zoo最小值g 和 panning around the map.

\n\n

传单是一个很好的替代谷歌地图. It is an open source JavaScript library designed to make mobile-friendly 互动 maps, 与简单, 考虑性能和可用性. 传单 is at its best when leveraging the big selection of raster-based maps that are available around the internet, 和 brings the simplicity of working with 瓷砖d maps 和 their presentation capabilities.

\n\n

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

\n\n

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

\n\n

投影-超越球形墨卡托

\n\n

的 question of how to project maps of the 3-dimensional spherical Earth onto 2-dimensional surfaces is an 老而复杂的问题. Choosing the best 投影 for a map is an important decision to make for every web map.

\n\n

在我们简单的世界地图D3中.Js教程中，我们使用了 Spherical Mercator 投影坐标系统通过调用 d3.地理.墨卡托(). 这个投影也被称为 Web墨卡托. 这个投影是由谷歌推广的 谷歌地图. 后来，其他web服务也采用了这种投影，即 开放地图, 必应地图, 这里的地图 和 MapQuest. This has made Spherical Mercator a very popular 投影 for online 光滑的地图.

\n\n

All mapping libraries support the Spherical Mercator 投影 out of the box. If you want to use other 投影s, you will need to use, 例如, the Proj4js library, which can do any transformation from one coordinate system to another. 在传单的情况下，有一个 Proj4传单 插件. 就谷歌地图而言，什么都没有.

\n\n

D3.js brings cartographic 投影s to a whole new level with built-in support for many different 地理预测. D3.js models 地理预测 as full 地理metric transformations, 也就是说，当直线投影到曲线上时, D3.js applies configurable adaptive resampling to subdivide lines 和 eli最小值ate 投影 artifacts. 的 扩展地理投影D3插件 使支持的投影数量超过40个. 甚至可以创建一个全新的自定义投影 d3.地理.投影 和 d3.地理.投影Mutator.

\n\n

栅格地图

\n\n

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

\n\n

矢量操纵的飞行

\n\n

经典制图中最大的挑战之一是 地图概括. 你想要有尽可能多的细节几何, 但这些数据需要适应显示地图的比例. Having too high a data resolution increases download time 和 slows down rendering, 而过低的分辨率会破坏细节和拓扑关系. Slippy maps using vector data can run into a big problem with 地图概括.

\n\n

One option is to do 地图概括 beforeh和: to have different datasets in different resolutions, 然后 display the appropriate dataset for the current selected scale. But this multiplies datasets, complicates data maintenance, 和 is prone to errors. 然而，大多数映射库仅限于此选项.

\n\n

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

\n\n

我想要更多!

\n\n

D3.Js并不容易掌握，它有一个陡峭的学习曲线. 熟悉很多技术是必要的, 即JavaScript对象, jQuery链接语法, SVG和CSS, 当然 D3的API. On top of that, one needs to have a bit of design skill 创建 nice graphics in the end. 幸运的是,D3.js has a big 社区, 和 there are a lot of resources for people to dig into. 学习D3的一个很好的起点是 这些教程.

\n\n

If you like learning by exa最小值ing examples, 迈克·博斯托克 has shared 600以上D3.js的例子 在他的网页上. 所有D3.js的例子 have git repository for version control, 和 are forkable, cloneable 和 commentable.

\n\n

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

\n\n

最后还有一点奖励, here’s one of my favorite examples showing off the 令人惊奇的事情 D3 is capable of:

\n\n\n\n
\n相关: Survey of the Best Online Mapping Tools for Web 开发人员: 的 Roadmap to Roadmaps\n
\n","as":"div","isContentFit":true,"sharingWidget":{"url":"http://workorder.lateand.com/javascript/a-map-to-perfection-using-d3-js-to-make-beautiful-web-maps","title":"构建伟大的网络地图:D3.js Tutorial","text":null,"providers":["linkedin","推特","脸谱网"],"gaCategory":null,"domain":{"name":"developers","title":"工程","vertical":{"name":"developers","title":"开发人员","publicUrl":"http://workorder.lateand.com/developers"},"publicUrl":"http://workorder.lateand.com/developers/blog"},"hashtags":"JavaScript,D3.js,WebMaps,GeographicalInformationSystems,制图学"}}> < /脚本