共计 1263 个字符，预计需要花费 4 分钟才能阅读完成。
引子
继 Learn D3: Introduction 第二篇，只是英文翻译，可批改代码的局部用动态图片代替了，想要实时交互请浏览原文。
- 原文：Learn D3: By Example
- 版本：Published Mar 24, 2020
- Origin
- My GitHub
注释
开始应用 D3 的最佳形式之一是浏览示例库。
如果你运气好（而且有很多抉择，你的几率也不错），你可能会找到一个能够从新调整用处的示例。这能够节俭学习如何从头开始构建的大量精力。例如，要结构一个 treemap，你能够查问 d3 档次 API 索引，但更快的办法是获取 treemap 示例并替换你的数据。
这可能感觉像舞弊，但没关系！👍 示例不仅是可重复使用的模板，也是学习工具，暗示着要学习的主题。”突破“一个例子，通过修补变动的货色，看看产生了什么，能够帮忙你比被动浏览更快地了解。
另外，这很乏味。😺
并非偶合，Observable 旨在帮忙你进行修补。拜访任何笔记本，编辑一个单元格，看看会产生什么！在许多状况下，替换数据所须要的只是单击以替换文件。如果你喜爱这个后果，通过派生来保留你的工作。
你还能够导入示例并批改它们，而无需深刻代码。毫无疑问，这是开始应用 D3 最快的形式，而且随着你的学习，它会变得更加弱小。
让咱们看看如何进行的。
假如我给你一组数字。对于这些数据，你能通知我些什么？
你能够手动查看一些值，但这不会显示太多。无奈晓得你查看的多数值是否代表整个散布。如果你要通过引入 D3（版本 6）来计算一些汇总统计数据，例如最小值、中值和最大值，该怎么办？
好吧，这很重要。但咱们须要比单个数字更丰盛的货色来取得散布感。
咱们须要一个可视化。确切的说是直方图。因而，让咱们导入直方图示例，并应用导入的 with 子句（Observable JavaScript 特有的个性）将数值数组 values 作为 data。
瞧！当初咱们看到：数据大抵造成以零为核心的正态分布 (我应用 d3.randomNormal 创立了这些值，预期值 μ=0，标准偏差 σ=1。）
但咱们并不局限于在导入时替换数据。咱们能够笼罩任何单元格，比方自定义 x 或 y 轴的款式。或者，如果咱们更喜爱高度略小的图表，咱们能够从新定义高度。
在这张高度略小的图表中，您是否留神到沿 y 轴刻度较少？神奇！如果你认为这很酷，那么在咱们注入动态数据时，看看这个直方图吧！单击上面的“play”或拖动滑块。
上面的 values3 单元格生成随机值，而 x 单元格将直方图的区域固定为 [-10，+10]。固定区域显示了散布如何随平均值 mu 的变动而变动；如果未指定固定区域，则将计算该区域以适配数据，并且只有通过认真读取 x 轴刻度，散布的变动才会显著 (要亲自查看，请尝试从以下导入的 with 子句中删除 x。）
咱们不须要重写直方图来激活它，因为援用 mu 的单元格，包含导入的单元格，在 mu 产生更改时会主动运行，这要归功于数据流。
当初你曾经看到了如何示例再利用，那么让咱们从头开始编写一些代码吧！
Next
附
提取了下面一个示例的次要代码，做了一个动态的页面，见这里。
参考资料
- Learn D3: By Example
