D3.js 漫游指南

简介: D3.js 简介 原文: https://medium.com/@enjalot/the-hitchhikers-guide-to-d3-js-a8552174733a 译文源代码地址: https://github.

原文: https://medium.com/@enjalot/the-hitchhikers-guide-to-d3-js-a8552174733a

译文源代码地址: https://github.com/ssthouse/d3-blog/blob/master/d3-guide/d3_roadmap_cn.md

如果这篇文章对你有帮助的话, 不妨点个赞 :tada:

github 地址: https://github.com/ssthouse/d3-blog

学习D3.js的旅途中看到的风景十分美妙, 壮丽 有时甚至有些崎岖. 你可能会被d3.js文档长长的function列表所吓到(d3’s API documentation ), 或者被成堆的教程弄的疲惫不堪( dozens of tutorials). 这里有超过两万个例子你可以用来学习: 20,000+ d3 examples , 但你不知道哪些是真正对你学习D3.js有帮助的.

我们仍然在努力摸清学习D3的整幅地图&

如果你只是想要快速得到一个柱状图或者图表, 那么这篇文章可能不太适合你. 这里有很多库可以帮你做到这一点: plenty of charting libraries . 如果你更倾向于看书学习, 这本书也许是你不错的起点 Interactive Data Visualization for the Web. Elijah MeeksD3.js in Action 可以帮助你更好的了解D3的API.

这篇文章目的是让你在思想上做好学习D3的准备, 并且提供一些接下来学习的方向. 除了对于D3本身API的学习, 关于web标准的HTML, SVG, CSS, Javascript 和 数据可视化的概念,标准都是需要学习的. 很有可能你已经知道上面这些中的一部分, 这篇文章旨在为你继续学习提供一个好的起点.

[r2d3.us visual introduction to machine learning sets the bar high](https://user-gold-cdn.xitu.io/2018/6/12/163f24615b562fcd?w=1838&h=812&f=png&s=42330)r2d3.us visual introduction to machine learning 设置了一个很高的起点

在我们进入数据可视化和代码技巧的学习之前, 先让我们看看一些能让我们激发学习兴趣的东西. 这里有很多让人惊叹的例子, 不妨点进去看一看, 并给自己设定一个学习目标: New York Times article, r2d3, distill.pub, datasketch|es, polygraph, ncase.

不要只是看看就好, 你可以给自己设定一个大一点的目标. 我从这篇文章中学习到, 最好的学习方式就是给自己设定一个想要完成的任务, 并且绞尽脑汁的去完成它: interviewing some of the top data visualization practitioners using d3.js .

图形化的展现形式

D3 并没有引入一种新的视觉展现形式. 不同于 Processing, Raphaël, 或者 Protovis, D3 图形方面的词汇都是直接来自于 web标准: : HTML, SVG, and CSS
http://d3js.org

Learning d3.js to write charts is like to learning French to write nutrition labels. To be fair, [@syntagmatic has made some beautiful nutrition visualizations](https://user-gold-cdn.xitu.io/2018/6/12/163f2461562c382e?w=921&h=293&f=png&s=267173)学习D3来写图表就像是学习法语来写营养标签. 公平的来说 , @syntagmatic 确实做出了非常不错的 营养标签

图表仅仅是内部有一些形状的矩形. 而D3提供的是一种让你通过操作图标或者你自己定义的图形来表达你想要展示数据的方式. 它让你可以轻易地为你的图形添加可视化交互, 定义你的图形有怎样的行为. 你在D3中学到的将是一种可视化的表达方式, 这是你在其他library中所得不到的.

如果你想要了解人们所用的不同种类的标记和图形符号所遵循的准则, 你可以参考这本书: Grammar of Graphics.

不过不用担心, 仅仅是用圆圈和矩形你就已经可以写出无数具有创造力的作品了. 从简单的事情做起, 先在屏幕上展示一些东西, 再慢慢优化它.

在Web展示上

[SVG Beyond Mere Shapes 是对web标准的图形操作非常棒的展示](https://user-gold-cdn.xitu.io/2018/6/12/163f2461640c2160?w=2216&h=1056&f=png&s=475378)SVG Beyond Mere Shapes 是对web标准的图形操作非常棒的展示

我们选择D3的原因之一是: 你可以非常方便的将你的作品分享给任何有浏览器的人. 这意味着你需要对于HTML5有一个基本的了解. 在你开始学习D3的API之前, 你应该已经掌握 SVG, HMTL 和 CSS的基本知识. 如果有时间的话, 你最好看看这篇讲Canvas的文章(如果你要展示的数据数据量非常大的话) learn some Canvas . 我推荐你也看看这篇, 它能帮你很好的将Canvas和D3结合使用 this is a great intermediate tutorial.

对于SVG, 我推荐看看这个简短有趣的介绍 SVG primer 来自 Scott Murray. 使用工具: BlockBuilder 来迅速开始你的coding而不用费时配置开发环境. 你也可以看看MDN对于SVG的官方文档 MDN reference site for SVG. 等你掌握了SVG的基础知识后, 你可以再看看这篇文章, 可以让你对SVG有一个更深的理解 SVG beyond mere shapes 来自 Nadieh Bremer.

[http://blockbuilder.org makes it easy to play with web standards!](https://user-gold-cdn.xitu.io/2018/6/12/163f246243fe3b17?w=1070&h=740&f=gif&s=17577806)http://blockbuilder.org 让你可以快速上手玩转web图形标准!

其实你甚至可以不用使用 SVG来进行图形展示, 有时候直接用 div 就足以让你做出想要的效果. 当然这要求你对 CSS 有较好的掌握: CSS positioning . 为了达到你想要的效果, 你甚至可以 混用 HTML, SVG , Canvas!

开始学习 d3.js

[d3js.org](https://user-gold-cdn.xitu.io/2018/6/12/163f2461737ba4ea?w=2212&h=450&f=png&s=1552138)d3js.org

你可能见过D3的API文档, 展示着成堆的Function: d3’s API, 幸运的是, 现在D3已经拆分为了一个个的模块, 所以我们从中挑选一些特别常用的来进行介绍.

d3-scale

[colors are one common use of scales!](https://user-gold-cdn.xitu.io/2018/6/12/163f24625b61f204?w=1864&h=736&f=png&s=6716)colors 是对于scale非常常见的一种使用方式

scales是D3中非常基础的一个工具. 你可以从这里对它有一个大概的了解: Introducing d3-scale 来自D3作者 Mike Bostock. 无论你做什么样的数据可视化, 你都非常有可能用到一种或多种scale.

d3-shape

A [streamgraph, thanks to SVG paths!](https://user-gold-cdn.xitu.io/2018/6/12/163f24627a87c141?w=1914&h=806&f=png&s=154258) streamgraph,感谢 SVG paths!

SVG 的path非常冗杂 (see this thorough overview), 所以 d3-shape 提供了一些让我们非常方便创建并操作SVG path的方法. 你可以看看 Mike 的 Introducing d3-shape 来了解它的作用并着手开始使用它. d3-shape 还可以帮助你在Canvas中绘制各种各样的图形, 你仅仅添加一行代码就能将SVG的path添加到Canvas中!

d3-selection

the [General Update Pattern](https://user-gold-cdn.xitu.io/2018/6/12/163f2462716413d7?w=760&h=320&f=gif&s=661762)the General Update Pattern

D3中最难以理解的部分可能就是它的selection了, 同样的, 看看D3作者的文章能让你对D3的selection模型有一个更好的理解: General Update Pattern. 我花了好几个月用脑袋锤桌子才最终理解了selection模型, 但是不要为此感到害怕! 你并不需要完完全全的掌握selection的所有api才能完成一份D3的作品. 当你做好了学习的准备, 你可以从这篇文章开始: d3-selections README. 还有, 请一定看看这篇文章, 非常有助于理解selection模型 Thinking in Joins.

d3-collection

d3-nest makes it easy to [group similar things together](https://user-gold-cdn.xitu.io/2018/6/12/163f24635906997c?w=1904&h=974&f=png&s=109140)d3-nest 让你可以非常轻松的 将相似的数据归结在一起

操作数据是数据可视化中非常重要的步骤. 有时候这甚至是最困难的一部 (如果你的数据集不是很完美, 或者你对它没有很好的理解). 虽然有很多可以帮助进行数据处理的工具, 这里我还是推荐看看d3 collection d3-collection,特别是这个模块: nest function.

d3-hierarchy

a [Treemap is easy to layout thanks to d3-hierarchy](https://user-gold-cdn.xitu.io/2018/6/12/163f24634e8304af?w=1290&h=1292&f=png&s=383969) Treemap 感谢 d3-hierarchy

接着上面对于 数据操作 的讨论. 在很多数据可视化中, 按照数据的结构对其进行相应的展示是非常关键的一点. 你可以在这里找到很多工具Function, 它们能帮你很方便的进行这样的数据处理: d3-hierarchy 绘制树状结构的数据.

d3-zoom

[zooming is fun!](https://user-gold-cdn.xitu.io/2018/6/12/163f2462f30323af?w=958&h=482&f=gif&s=4353426)zooming is fun!

缩放是一种非常常见的数据可视化交互, D3的作者 Mike 给出了 一系列的例子 展示如何将缩放功能引入你的数据可视化作品中 d3-zoom. 你也可以看看和 缩放 非常类似的一种操作 拖拽 d3-drag

d3-force

[sparse matrices, amirite?](https://user-gold-cdn.xitu.io/2018/6/12/163f24646e2d0783?w=640&h=531&f=gif&s=22162572)

sparse matrices

D3中非常让人们感到惊艳的功能之一是 d3 force layout. 它非常容易上手使用, 但是很难真正掌握. 详细信息请参考: d3-force.

搜索!

最后一个tip: 你可以在这个网址对任何API Function搜索使用案例: BlockBuilder’s search.你甚至可以将你的搜索范围限定版本的d3上!

look at all those blocks!look at all those blocks!

D3社区

Welcome to the [Blockiverse](https://user-gold-cdn.xitu.io/2018/6/12/163f24644b58fe91?w=1412&h=765&f=png&s=293806)Blockiverse

和志同道合的人们联系起来! 你可以加入我们的slack channel: d3.js slack channel. 或者找到和你最近的D3线下活动: https://www.meetup.com/topics/d3-js/). 如果你对D3非常狂热的话, 来参加SF每年秋天的聚会吧! annual d3.unconf!

how I see the d3 community and the many learning curves one encounters on their journey我对于D3社区 和 D3学习过程中困难的理解

非常感谢 Erik Hazzard 帮助我编辑和润色这篇文章. 感谢 Kai Chang 对于文章提出的建议, 更加感谢你对于 d3 社区的帮助. 感谢slack channel #teaching-d3 in the d3js Slack, 特别是 SebastianJohn 的反馈. 当然了, 最最感谢D3的作者 Mike Bostock 创造了一个能让我们所有人玩耍的乐园 !

想继续了解 D3.js ?

这里是我的 D3.js数据可视化 的github 地址, 欢迎 start & fork :tada:

D3-blog

如果觉得不错的话, 不妨点击下面的链接关注一下 : )

github主页

知乎专栏

掘金

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
监控 数据可视化 安全
如何使用webgl(three.js)实现煤矿隧道、井下人员定位、掘进面、纵采面可视化解决方案——第十九课(一)
three.js、webgl、3D煤矿隧道、三维井下人员定位、掘进面三维可视化、纵采面可视化、采集面可视化展示、设备检测、数字孪生、物联网3D、3d建筑、3d库房,bim管理系统
288 1
|
开发工具
分享:实现Cesium的地下模式效果
分享:实现Cesium的地下模式效果
261 0
|
23天前
Threejs实现闪电效果
这篇文章讲解了如何利用Three.js实现闪电效果,包括设置粒子系统、调整材质属性以及控制闪电路径的方法。
22 0
Threejs实现闪电效果
|
2月前
UE5使用Dash插件实现程序化地形场景制作
本文介绍了如何在Unreal Engine 5中使用Dash插件来实现程序化地形场景制作,包括插件激活、基本使用、资产导入路径和练习成果展示。
UE5使用Dash插件实现程序化地形场景制作
|
JSON JavaScript 前端开发
【前端】使用jQuery实现地铁线路地图动态加载站点
通过上篇文章,我们已经把地铁线路静态布局设计好了,接下来就是让静态转为动态化和交互 今天,有个小伙伴咨询我说,已经有很多成熟的前端框架可以使用,我直接学习他们的用法,完全不用怎么自己写布局,干嘛还要花这么多时间从原始方式去布局呢 我的回答是,其实他说的是有道理的,时间是宝贵的,但是长期已往,如果不能了解和理解最原视的架构,可能技术在迭代更新过程中会很费劲,亦或者更加依赖某一项框架 对技术的追求还是那句话:掌握原理,不断练习,才能更好跟上前言技术
387 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery实现静态布局地铁线路地图和自动点亮站点
前段时间,看到有这样一篇文章,标题写着,jQuery是不是过时了!个人觉得,这是技术迭代更新过程中无法避免的,也是一种进步。能发出如此感概,说明已经有新的技术框架逐渐占据了一定的使用量。 技术框架会不会过时,这个并不是最重要的,重要的是能够以技术框架作为辅助,理解和掌握他们的原理,进而实现自己目标功能。功能实现逻辑基本上不会变 jQuery也是有自己得优势,在javascript基础上封装的函数库,更方便控制DOM对象,也可以快速使用jQuery锻炼自己的前端编程逻辑
357 0
|
前端开发
互动应用开发p5.js——Perlin噪声生成烟雾(柏林噪声)
Perlin噪声生成烟雾 一、实验内容: 和鼠标交互结合生成Perlin Noise的烟雾效果 要求使用p5.js实现烟雾随机生成效果: 流场利用Perlin噪声实现;(30分) 粒子按照流场运动;(30分) 速度、数量等可由参数控制;(15分)(HTML页面交互传递参数8分,代码中变量控制7分) 使用类来实现粒子;(15分) 文档和注释清楚;(10分) 提交工程目录压缩的zip或者rar,以及一个readme.txt简要说明实现思路和重要参数的功能
338 0
互动应用开发p5.js——Perlin噪声生成烟雾(柏林噪声)
【UE4系列】3dsMax,制作汽车骨骼+蒙皮
1,【打开模型】 使用3ds Max 打开模型 2,【解组】 打开模型之后,全选模型,进行解组 解组成功,如下图 3,【删除文件】 解组成功之后,把子文件夹全都选中,拖到一级目录,并删除红色框里所有的文件 4,【修改命名】 根据汽车零件部位,修改命名 4.1 改为Body 4.2 前右轮修改名称 为FR_Wheel (Front Right),名字也可以其他,修改为比较容易辨识就可以 4.3......
242 0
【UE4系列】3dsMax,制作汽车骨骼+蒙皮
|
自然语言处理 数据可视化 JavaScript
基于WebGL的虚拟太阳系漫游技术实现 ThingJS 科幻片
3D可视化技术逐渐应用到现代多媒体的课堂教学中。虚拟太阳系是一款天文类的3D可视化应用,它借助3D在线浏览。
基于WebGL的虚拟太阳系漫游技术实现 ThingJS 科幻片
|
JSON 数据可视化 JavaScript
基于WebGL无插件虚拟场景漫游关键技术(完整版)ThingJS
如果要构建一个具有交互性和拓展性的沉浸式漫游场景,常用到3DSMAX、three.js等软件技术,学习门槛较高;ThingJS可视化组件更加轻量化,B/S架构下的3D可视化应用构建更轻松,为不少企业客户降低了项目开发成本。
基于WebGL无插件虚拟场景漫游关键技术(完整版)ThingJS