【译】Learn D3 入门文档: Introduction

472 阅读3分钟

引子

D3 很早就听说了想要尝试一下,找到的中文版翻译在查 API 的时候可以参考,对于入门不太方便,打算先把官方最新的入门教程同步翻译一下。

正文

本系列将引导你踏出使用 D3.js 的第一步。

86-logo

在我们开始之前,值得简单考虑一下:为什么要费心学习 D3 ?为什么要在 Observable 上学习?

首先,D3 很受欢迎(179M 下载量和 97K start),所以你有一个良好的陪伴群体。这里有大量社区开发的资源,包括教程、视频、课程和书籍。D3 团队已经发布了数百个可派生的示例和教程,以有益于你的学习和生产力。

另一方面,D3 具有灵活的特性。D3 的超能力是你可以做任何你想做的事情——自由创造!D3 展廊是一个名副其实的种类动物园:treemaphierarchical edge bundlingSankey diagramdensity contoursforce-directed graph 等等(还有近百个地图投影!)。这种灵活性源于 D3 的基础方法,主要关注可组合的基本元素,如形状比例,而不是可配置的图表。D3 不施加任何约束,因此有益于利用现代浏览器支持的所有功能。

D3 以动画和交互著称。如果你有几分钟时间,可以观看一个 bar chart raceanimated treemap 。进入到 hierarchical bar chartcollapsible tree 或者可缩放的 sunbursttreemappacked circles 。或者刷一个scatterplot matrix 或者放大一个 area chart 。动画是一个讲故事的有力载体,而交互让活跃的读者能够探索。

当然,获得这种力量是有代价的。有很多东西需要学习:D3 有超过三十个模块和一千种方法!D3 可能比专门用于探索可视化的工具更乏味,例如 Vega Lite

这个时候轮到 Observable 出场了。

Observable 是学习 D3 的理想环境,因为它使用数据流简化了代码就像电子表格一样。当你编辑时,单元格会自动运行以获得快速反馈。你几乎不需要代码就可以添加交互或动画!我们将介绍 Observable 的特性

Observable 围绕协作展开,帮助你从社区中学习并回馈社区,而不仅仅是复制和粘贴。任何笔记本都可以派生或导入。笔记本可以导出为可复用的组件,例如 color legendscrubber 。你可以对单元格进行评论、建议和合并更改,或寻求帮助

简介足够了。让我们拉开帷幕,开始学习 D3 。

参考资料

more

之前想着靠自己去探索《巫师 3》,最终发现是自己太天真了,没这类游戏经验,玩的很艰难,于是没玩下去。

这次决定参考别人的视频攻略,重新来过。

花了 10 多个小时终于出了新手村,也逐渐上手,体会到其中的乐趣。后面也不用完全靠教程了。

86-poster