造数据                        造中间值                  造结构
  ├─ d3.range / d3.ticks        ├─ d3.interpolate(插值)   ├─ d3.bin → 直方图的桶
  ├─ d3-random*(17 种分布)      └─ d3.blur / blur2(平滑)  └─ d3.group/rollup 家族 → 层级数据
  └─ d3-time*(时间区间)          (d3-time 也在这里)
         │                           │                        │
         └─────────── 全部服务于「绑数据之前」这一步 ──────────┘

  图说:生成的数据用于测试和演示;插值/平滑用于修曲线;分箱和分组的产物直接决定图的结构。

  d3.range(10)          // [0,1,2,3,4,5,6,7,8,9]
  d3.range(-3, 3)       // [-3,-2,-1,0,1,2]
  d3.range(0,10,2)      // [0,2,4,6,8]
  d3.range(1, 2, .2)    // [1, 1.2, 1.4, 1.6, 1.8]

  图说:三个参数是 (起点, 终点, 步长);只给一个参数时起点默认 0、步长默认 1。

  d3.ticks(-25, 75, 5)   // [-20,0,20,40,60]    —— 请求 5 个,给了 5 个
  d3.ticks(-25, 75, 7)   // [-20,0,20,40,60]    —— 请求 7 个,还是这 5 个!参数只是建议

  const normal = d3.randomNormal(100, 15);       // 均值 100、标准差 15 的生成器
  const values = d3.range(10000).map(() => normal());  // 一万个样本
  // 画成直方图就是一座钟形小山(本节后面就画它)

  图说:d3.range(10000) 先造一万个占位下标,map 里逐个换成随机数——
  「造序列」和「造随机」在这行代码里合流。

  const seededRand = d3.randomInt.source(d3.randomLcg(123));
  seededRand(0,100)   // 每次运行都得 [28, 43, 3, 22, 35]——这些数照原书
  const rand = d3.randomInt;              // 默认源
  rand(0,100)         // 每次不同

  const interpolate1 = d3.interpolate(23, 123);   // 造一个插值函数
  interpolate1(0)      // 23     —— t=0 是起点
  interpolate1(0.25)   // 49.5
  interpolate1(0.5)   // 74
  interpolate1(1)     // 123    —— t=1 是终点

  图说:插值函数吃一个 0~1 的 t,吐出从 a 到 b 按比例推进的值。
  transition 动画每一帧就是在算一个新的 t。

  d3.interpolate("Part 0 of 100", "Part 100 of 100")
  interpolate2(0.25)   // 'Part 25 of 100'   —— 字符串里的数被找到并插值

  d3.interpolate(new Date(2023,10,14), new Date(2024,4,8))
  interpolate3(0.5)    // '2024-02-10'       —— 日期按毫秒数插

  d3.interpolate([3,10,100],[30,100,0])
  interpolate4(0.5)    // [16.5, 55, 50]     —— 数组逐项插

  d3.interpolate("red", "blue")
  interpolate4(0.25)   // 'rgb(191, 0, 64)'  —— 颜色走 RGB 空间

  d3.interpolate({a:-30, b:'red'}, {a:50, b:'blue'})
  interpolate5(0.5)    // {a:10, b:'rgb(128,0,128)'}  —— 对象逐属性插

  const data = [0,100,0,-100,0,100];
  d3.blur(data, 0.5)   // [31.3, 23.5, 1.6, -10.9, 10.9, 43.8]

  图说:峰值 100 被摊薄到邻点(31.3、23.5…),谷值 -100 同样(变成 -10.9)。
  半径越大越糊;反复调用效果累积。以上数值照原书。

  d3.timeDay.floor(pm)   // 当天 00:00   —— 所在日的起点
  d3.timeDay.ceil(am)    // 次日 00:00   —— 下一个日边界
  d3.timeDay.round(am)   // 当天 00:00   —— 6:00 离当天近
  d3.timeDay.round(pm)   // 次日 00:00   —— 18:00 离次日近
  d3.timeDay(日期)        // = floor(日期) 的别名

  d3.timeDay.count(d3.timeWeek(now), now)        // 本周开始过了几天
  d3.timeDay.count(d3.timeWednesday(now), now)   // 距上周三过了几天
  d3.timeHour.count(d3.timeYear(now), now)       // 今年过了几小时

  d3.timeDay.range(d3.timeMonth.offset(now, -1), now)     // 过去 30 天,每天一个 Date
  d3.timeHour.every(8).range(d3.timeDay.offset(now,-5), now)  // 每 8 小时,15 个
  d3.timeHour.filter(d => d.getHours() < 17 && d.getHours() > 9)
    .range(now, d3.timeDay.offset(now,3))                // 未来 3 天的 9–17 点

  ① 造数据   data.values = d3.range(10000).map(d3.randomNormal(100, 15))
             —— 均值 100、标准差 15 的一万个数

  ② 分箱     data.bins = d3.bin().thresholds(100)(data.values)
             —— 约 100 个桶(实际可能更多);每个桶是一个数组,
                附带 x0(下闭界)、x1(上开界)两个属性,桶长 = 桶里元素个数

  ③ 比例尺   scaleX = d3.scaleBand().range([25, 775])
                .domain(data.bins.map(d => d.x0))     ← 桶的区间左界当类别
             scaleY = d3.scaleLinear()
                .range([600-25, 25])                   ← y 轴翻转:大值在上
                .domain([0, d3.max(data.bins, d => d.length)])
             color  = d3.scaleLinear()
                .range(["darkgreen", "brown"]).domain(scaleY.domain())  ← 柱越高越红

  ④ 画柱     svg.selectAll("rect.bins").data(data.bins)
                .join("rect")
                .attr("x", d => scaleX(d.x0))
                .attr("y", d => scaleY(d.length))
                .attr("width", scaleX.bandwidth())
                .attr("height", d => scaleY(0) - scaleY(d.length))
                .style("fill", d => color(d.length));

  图说:每个桶一根柱:横位置 = 桶的区间(x0),柱高 = 桶里数的个数(length),颜色随高度渐变。
  正态分布的中间桶最高,向两边递减——钟形就是这么画出来的。

  const bin5 = d3.bin().thresholds([0, d3.quantile(data, .25),
                                     d3.quantile(data, .5),
                                     d3.quantile(data, .75)]);   // [0, 3, 7, 15]

  function makeTidyRow(row, _, headers) {
    return headers.slice(1)                 // 跳过 Year 列,12 个月份
      .map(h => ({ Year: +row.Year, Month: h, Rain: +row[h] }));
  }
  const tidyRows = await d3.csv(file, makeTidyRow);
  const rainfall = tidyRows.flat();         // 每行返回 12 个对象,摊平成 408 行

  // {Year: 1984, Month: 'Jan', Rain: 259.3}
  // {Year: 1984, Month: 'Feb', Rain: 32.5} …

  图说:行函数一行变十二行——宽表的「月份在列名里」被拍成了「月份在单元格里」。

  ① 按年分组(单键)
     yearMap = d3.group(rainfall, k => k.Year)
     // Map:1984 → [12 个月的对象],…,2017 → [12 个]
     yearMap.get(2012)        // 2012 年 12 个月的数组
     yearMap.get(2012)[8]     // {Year: 2012, Month: 'Sep', Rain: 19.2} ← 第 8 号是 9 月

  ② 按年+月两级分组(双键)
     yearMonMap = d3.group(rainfall, k => k.Year, k => k.Month)
     yearMonMap.get(2012).get('Sep')        // [ {…} ]  数组(键可能多对一)
     idxMap = d3.index(rainfall, k => k.Year, k => k.Month)
     idxMap.get(2012).get('Sep')            // {…}      直接是对象(键唯一才敢用)

  ③ 数组形态
     yearArr = d3.groups(rainfall, k => k.Year)
     // [[1984, [12 objects]], [1985, [12 objects]], …]  ← 绑 D3 数据最顺手
     yearMonArr = d3.groups(rainfall, k => k.Year, k => k.Month)
     yearMonArr[28][1][8][1][0]   // 2012 年 9 月——要钻五层:选哪个形态,看你取值深不深

  ④ 归并(rollup):分组时顺手算
     valueMap = d3.rollup(rainfall, v => v.map(d => d.Rain)[0],
                           k => k.Year, k => k.Month)
     valueMap.get(2012).get('Sep')          // 19.2  —— 叶子直接是雨量,不再是对象数组

  ⑤ 摊平形态
     d3.flatRollup(rainfall, v => v.map(d => d.Rain)[0],
                   k => k.Year, k => k.Month)
     // [[1984,'Jan',259.3], [1984,'Feb',32.5], …]  —— 一行一个三元组,永不深于两层

  图说:同一份数据、同两把钥匙,五种形态。选型的判据原书给了一条:
  「按特定键取值选 Map,绑嵌套结构选数组」。