输入:数据数组                输出:SVG path 的 d 字符串(或 Canvas 命令,见第 12 章)
  ┌─────────────────────────────────────────────────────┐
  │ d3.line()        二维点列 → 折线/曲线               │
  │ d3.area()        二维点列 → 封闭面(topline+baseline)│
  │ d3.lineRadial()  (角度,半径)点列 → 极坐标线         │
  │ d3.areaRadial()  (角度,半径) → 极坐标环带            │
  │ d3.symbol()      → 单个符号路径(14 种预置形状)      │
  │ d3.arc()         (角,半径) → 圆弧(第 12 章)         │
  │ d3.link()        两个点 → 曲线连边(第 15 章)         │
  └─────────────────────────────────────────────────────┘

  图说:每个生成器 = 一个函数;先造函数、配访问器,再调用它把数据变成字符串。

  const coords = [ [0,0], [100,200], [200,50], [300,150], [400,100] ];

  ① 造生成器  const line = d3.line();
  ② 算字符串  const pathData = line(coords);
              // "M0,0L100,200L200,50L300,150L400,100"
  ③ 挂上页面  d3.select("svg").append("path").attr("d", pathData);
              // CSS: path { stroke: red; fill: none; }  ← fill 必须清掉,默认是黑色实底

  图说:M = 移到起点,L = 直线连到。字符串里的每个数字都来自数据点。

  d3.select("svg").append("path")
    .datum(coords)      // 整个数组作为一个数据项绑给 path
    .attr("d", line);   // ← 直接引用函数,等价于 .attr("d", c => line(c))

  图说:datum() 与 data() 不同——它是「一对一」绑单个值(第 05 章);
  attr 的回调收到绑定的数组,line 函数吃数组正好对口。

  // 对象数组:配访问器
  const line = d3.line().x(d => d.step).y(d => d.value);

  // 比例尺:访问器里直接调 scale
  const line = d3.line().x(d => scale.x(d[0])).y(d => scale.y(d[1]));
  // 等价于把两个访问器当参数:d3.line(d => scale.x(d[0]), d => scale.y(d[1]))

  d3.line().defined(d => d && !isNaN(d[1]) && d[1] >= 0)
  // y 值为 NaN 或负数的点跳过,线在那里断开而不是斜穿过去

  datasets = [
    [ [0,·], [5,·], [10,·], [15,·], [20,·] ],    ← 序列 1
    [ [0,·], [5,·], [10,·], [15,·], [20,·] ],    ← 序列 2
    [ [0,·], [5,·], [10,·], [15,·], [20,·] ]     ← 序列 3
  ]
  x 轴共享 steps = [0,5,10,15,20]

  外层 data(datasets)   → 每个序列绑一个 <path>(class="dataset")
  中层 line 函数被调     → 收到的 d 是一整个序列(坐标对数组)
  内层 x()/y() 访问器    → 收到的 d 是单个坐标对 [x, y]

  container.selectAll("path.dataset")
    .data(datasets)
    .join("path")
      .attr("class", "dataset")
      .attr("d", line)                     // line(一个序列) → path 字符串
      .style("stroke", colorScale);        // 每序列一色,序数比例尺

  图说:访问器的上下文比 attr 回调低一层——这个「一层之差」是多序列图最容易错的地方。

  utils.cartesianAxes().container(container).xScale(scale.x).yScale(scale.y)();

  d3.line().curve(d3.curveBasis)                        // 一句换样条
  d3.line().curve(d3.curveCatmullRomClosed.alpha(0.2))  // 参数版

  图说:原书 Curves/3-curves-interactive.html 可以拖点、换算法、调参数——
  选型别靠记,靠在那个页面里试。

  const coords = [ [0,0], [100,200], [200,50], [300,150], [400,100] ];

  area(coords)
  // M0,0L100,200L200,50L300,150L400,100   ← topline,和 line 完全一样
  // L400,0L300,0L200,0L100,0L0,0Z          ← baseline 折返(默认 y=0),闭合

  图说:粗体部分就是 baseline——area 默认假设基线是 y=0,
  所以 CSS 里要配半透明填充:path { fill: rgba(100%,90%,90%); }

  const line = d3.lineRadial()
    .angle(d => scale.angle(d[0]))    // 月份 → 0~2π
    .radius(d => scale.radius(d[1])); // 数值 → 像素

  const area = d3.areaRadial()
    .angle(d => scale.angle(d[0]))
    .outerRadius(d => scale.radius(d[1]))   // 顶线
    .innerRadius(d => scale.radius(d[2]));  // 基线(可省,默认 0)

  // 轴用第 08 章的 utils.radialAxes();点标记要 Cartesian 坐标:
  d3.pointRadial(scale.angle(a), scale.radius(r))   // → [x, y]

  const star = d3.symbol(d3.symbolStar, 100);   // 造一个 100 平方像素的星
  star()   // 'M4.514,0A4.514,…' ← path 字符串

  // 按序列换形状:符号本身也可以当序数比例尺的 range
  const symbolScale = d3.scaleOrdinal(d3.symbolsFill).domain([0, datasets.length]);
  .attr("d", point.type(symbolScale(i)))    // 第 i 个序列用第 i 种符号