译Learn D3 入门文档: Introduction

Posted 2021-08-21 XXHolic

引子

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

• 原文：Learn D3: Introduction
• 版本：Published Mar 24, 2020
• Origin
• My GitHub

正文

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

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

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

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

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

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

这个时候轮到 Observable 出场了。

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

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

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

参考资料

• Learn D3: Introduction