D3 样例图系列简介
D3 Chart Example 这个系列的文章主要是学习 D3 在 Observable 中的官方样例，逐行 line-by-line 解读样例代码。
说明
由于 Observable 类似于 Jupyter Notebook，其代码是分为一个个 Cell，而且代码不仅仅包含 JavaScript（有一些方法并不是 D3 模块的 API，而是 Observable 平台内置方法，例如导入文件的方法，并不是使用 d3-fetch 模块）还有一些类似于 HTML 的模板语法，而且存在跨页面导入函数，以及引用其他来源的数据（可能是以附件的方式或引用外部源的方式），因此在 Observable 上的官方样例代码一般与与平台深度耦合，代码不能直接复制搬运应用到项目中。
在解读样例的同时，会基于原始的代码进行修改，以最小化的配置（不依赖 Observable 平台，仅在一般的前端 js 环境）复现这些图表，这样代码就更易于复用，复现的代码会存放在 d3-learning 这个 Github 仓库中。
此外在对原始例子的代码解读后，可能进行适度的简化，让实现代码更精简和通用；也可能对样例进行拓展，例如对于静态图表可能会尝试添加交互功能。
前置准备
首先最基本的一个操作是要在项目中引入 D3。
页面缩放
此外在 Observable 中提供了一个标准库 standard library，便于实现一些基础功能。
其中一个常用的功能是监听页面的大小调整，同步更新图表的宽度，这是实现响应式图表的基础，参考其源码写出一个类似的方法：
完整代码和在线交互可以查看这个 Codepen
// 获取页面宽度
let width = document.documentElement.clientWidth;
// console.log("init width: ", width);
// 为了优化性能，在核心代码外包了一层防抖函数
// 默认延迟时间是 500 毫秒
let timer = null;
function debounce(delay = 500) {
if (timer) {
// （如果倒计时的时间未到，而再次触发 debounce 函数）阻止计时器执行回调函数
clearTimeout(timer);
}
// 重新设置计时器，倒计时重新计算
timer = setTimeout(function () {
// 经过延迟后，执行核心代码
// 获取页面的宽度
// 也可以是 SVG 元素的宽度，可以将该元素的宽度设置为 width: 100%，让它随页面缩放而变换
const w = document.documentElement.clientWidth;
// 修改变量 width（存储当前页面的宽度信息）
if (w !== width) width = w;
// console.log(width);
// 执行完核心代码后，清空计时器 timer
timer = null;
}, delay);
}
function resized() {
// 实际使用防抖函数时，可以设置延迟时间
// 这里设置为延迟 1000 毫秒
debounce(1000);
}
// 监听页面调整大小时分发的 resize 事件
function setListener() {
window.addEventListener("resize", resized);
// 返回一个函数，其作用是注销监听器
return function removeListener() {
window.removeEventListener("resize", resized);
};
}
const removeListener = setListener();
// 当需要时调用方法注销监听器（例如移除图表时）
// removeListener()数据托管
另外在进行数据可视化前，需要准备数据，该系列文章的参考样例都是来自 Observable 上的，数据一般会在对应的 Notebook 页面的附件里。
对于小型的数据文件，我一般会从 Observable 下载下来后，再上传到 Github Gist 进行托管，而不是直接将数据内嵌到 JS 脚本中。因为这样可以更好地模拟真实的开发环境，实际项目中一般使用 d3-fetch 模块来读取服务器的数据，让代码更通用。
注意
由于 Github Gist 的限制，对于较大的数据文件（大于 10Mb）可能会采取其他方式导入项目中，会在笔记和源码中另外说明。