// 该变量用于计算环形内外半径
// 取宽度和高度两者之中较小值的一半
const radius = Math.min(width, height) / 2;
// ...
/**
 *
 * 绘制饼图内的扇形形状
 *
 */
// 使用 d3.arc() 创建一个 arc 扇形生成器
// 扇形生成器会基于给定的数据生成扇形形状
// 调用扇形生成器时返回的结果，会基于生成器是否设置了画布上下文 context 而不同。如果设置了画布上下文 context，则生成一系列在画布上绘制路径的方法，通过调用它们可以将路径绘制到画布上；如果没有设置画布上下文 context，则生成字符串，可以作为 `<path>` 元素的属性 `d` 的值
// 具体可以参考官方文档 https://d3js.org/d3-shape/arc
// 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-shape#扇形生成器-arcs
const arc = d3.arc()
    // 💡 设置内半径，由于这里所传递的参数不为 0，所以生成环状扇形（如果参数为 0 则生成完整扇形）
    .innerRadius(radius * 0.67)
    // 设置外半径
    .outerRadius(radius - 1);
// 💡 环形的宽度就是内外半径之差 (radius - 1) - (radius * 0.67) = 0.33 * radius - 1

// 绘制一系列环形图
const svg = wrapper.selectAll(".pie") // 返回一个选择集，其中虚拟/占位元素是一系列的 <svg class="pie"> 元素，用于分别绘制一个个环形图
    // 绑定数据 data（它基于各州的总人数降序排列，即人数较多的州先绘制）
    .data(data.sort((a, b) => b.sum - a.sum))
  .enter().append("svg") // 将元素绘制到页面上
    // 为每个 <svg> 添加 CSS class "pie" 类名（对应上面选择集的操作）
    .attr("class", "pie")
    // 使用方法 selection.each(func) 为选择集中的每个元素都调用一次函数 func 执行相应的操作
    // 在调用入参函数 func(d, i, nodes) 时，会依次传递三个参数：
    // * 当前所遍历的元素所绑定的数据 datum `d`
    // * 当前所遍历的元素在分组中的索引 index `i`
    // * 当前分组的所有节点 `nodes`
    // 具体参考 d3-selection 模块的官方文档 https://d3js.org/d3-selection/control-flow#selection_each
    // 这里调用方法 multiple() 在每个 <svg> 元素里绘制一个环形图
    // 💡 通过该方法可以创建一个上下文，可以同时访问到当前所遍历的元素，以及它的子元素
    // 💡 由于在回调函数 func 里 this 就指向当前所遍历的元素，可以通过 `d3.selection(this)` 创建（仅包含当前所遍历元素）的选择集，然后再通过方法 `selection.selectAll()` 获取子元素（其中 selection 表示通过 `d3.selection(this)` 所创建的选择集）
    .each(multiple)
  .select("g"); // 最后选择每个 <svg> 里的 <g> 容器（由于它经过了位置调整，便于后面为每个环形图添加文本注释）
// 绘制环形图的核心代码
// 传入的参数 `d` 是（包含一系列 svg 元素的）选择集当前遍历的元素所绑定的数据
// 它是一个对象 {state: string, sum: number, ages: array}
// 而函数内的 this 指向当前所遍历的元素，即相当于 nodes[i]
function multiple(d) {
  // 💡 通过 d3.selection(this) 创建的选择集，包含的元素视为父元素
  // 💡 以及 selection.selectAll() 创建的选择集，包含的元素视为子元素（或后代元素）
  // 💡 在该函数（环境/上下文）里可以同时访问父元素和子元素/后代元素
  // 返回的选择集所包含的元素是（在 <svg> 元素里所添加的）<g> 元素
  const svg = d3.select(this) // 💡 首先创建一个选择集，它包含当前所遍历的 <svg> 元素
      // 设置该 <svg> 元素的尺寸，它的宽和高都是环形图的直径
      .attr("width", r * 2)
      .attr("height", r * 2)
    // 创建一个 <g> 容器
    // 💡 这里会引起选择集变化，选中的元素是新增的（子元素）<g> 容器
    .append("g")
      // 通过 CSS transform 将容器 <g> 进行移动（向右移动半径长度 r，向下移动半径长度 r）
      // 让环形图的圆心绘制在 svg 的中心位置
      .attr("transform", `translate(${r},${r})`);
  // 在 <g> 容器里绘制一个环形图
  svg.selectAll(".arc") // 返回一个选择集，其中虚拟/占位元素是一系列的 <path class="arc"> 元素，用于分别环形图的各个扇形部分，💡 这里选中的是后代元素
      // 绑定数据
      // 调用饼图角度生成器 pie，对数据集 d.ages 进行转换处理
      // 计算出每个数据点（该州的各个年龄段）所对应的扇形的相关信息（主要是起始角和结束角）
      .data((d) => pie(d.ages))
    .enter().append("path") // 将元素绘制到页面上
      .attr("class", "arc") // 为各个 <path> 路径元素添加 CSS class "arc" 类名（对应上面选择集的操作）
      // 调用扇形生成器 arc
      // 同时还为扇形生成器设置内外半径，由于内半径不为 0 所以生成环状扇形（如果参数为 0 则生成完整扇形）
      // 由于扇形生成器并没有调用方法 area.context(canvasContext) 设置画布上下文
      // 所以调用扇形生成器 arc 返回的结果是字符串
      // 该值作为 `<path>` 元素的属性 `d` 的值
      .attr("d", arc.outerRadius(r).innerRadius(r * 0.6))
      // 设置颜色，不同扇形对应不同的颜色
      // 其中 d 是所绑定的数据（由饼图角度生成器所生成的），d.data 是原始数据点，所以 d.data.age 就是该扇形所对应的年龄段（名称）
      // 再通过颜色比例尺 color() 可以得到该扇形的相应颜色值
      .style("fill", (d) => color(d.data.age));
}

/**
 *
 * 绘制环形图
 * 每个环形图都使用单独的一个 <svg> 容器进行渲染
 * 💡 由于 <svg> 默认是 inline 元素，所以页面会自动将多个 <svg> 进行排版，最终效果是多个环形图不重叠地展示在页面上
 * 如果只采用一个 <svg> 来渲染所有的环形图，则需要（繁琐的坐标计算）手动在它们定位到 svg 画布中
 *
 */
// 💡 构建一个比例尺，用于将各州的人口总数映射为环形图的半径
// ⚠️ 由于要实现环形的**面积**大小比例与相应各州人口数量比例一致（线性关系），而面积与半径 r 是呈平方关系
// 💡 所以各州的人口总数与环形图的半径呈幂函数关系
// 💡 使用 d3.scaleSqrt 构建一个幂比例尺（幂为 0.5）进行人口数量与半径之间的映射
// 💡 这里将比例尺的定义域范围设置为 [0, sumMax] 其中上限 sumMax 是各州人口总数中的最大值，值域范围是 [0, 220] 即最大的环形半径是 220 像素
// 💡 方法 d3.scaleSqrt() 是 d3.scalePow().exponent(0.5) 的简写形式
// 具体可以参考官方文档 https://d3js.org/d3-scale/pow#scaleSqrt
const radius = d3.scaleSqrt([0, d3.max(data, (d) => d.sum)], [0, 220]);
// 使用 d3.arc() 创建一个 arc 扇形生成器
// 扇形生成器会基于给定的数据生成扇形形状
// 调用扇形生成器时返回的结果，会基于生成器是否设置了画布上下文 context 而不同。如果设置了画布上下文 context，则生成一系列在画布上绘制路径的方法，通过调用它们可以将路径绘制到画布上；如果没有设置画布上下文 context，则生成字符串，可以作为 `<path>` 元素的属性 `d` 的值
// 具体可以参考官方文档 https://d3js.org/d3-shape/arc
// 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-shape#扇形生成器-arcs
const arc = d3.arc()
  // 设置扇形的间隔半径（根据间隔角度结合间隔半径算出间隔弧长）
  .padRadius(50);
// 在页面创建一个 <div> 作为最外层容器，包裹一系列的 <svg> 元素
const wrapper = d3.select("#container")
                  .append("div");
// 绘制一系列环形图
const svg = wrapper.selectAll(".pie") // 返回一个选择集，其中虚拟/占位元素是一系列的 <svg class="pie"> 元素，用于分别绘制一个个环形图
    // 绑定数据 data（它基于各州的总人数降序排列，即人数较多的州先绘制）
    .data(data.sort((a, b) => b.sum - a.sum))
  .enter().append("svg") // 将元素绘制到页面上
    // 为每个 <svg> 添加 CSS class "pie" 类名（对应上面选择集的操作）
    .attr("class", "pie")
    // 使用方法 selection.each(func) 为选择集中的每个元素都调用一次函数 func 执行相应的操作
    // 在调用入参函数 func(d, i, nodes) 时，会依次传递三个参数：
    // * 当前所遍历的元素所绑定的数据 datum `d`
    // * 当前所遍历的元素在分组中的索引 index `i`
    // * 当前分组的所有节点 `nodes`
    // 具体参考 d3-selection 模块的官方文档 https://d3js.org/d3-selection/control-flow#selection_each
    // 这里调用方法 multiple() 在每个 <svg> 元素里绘制一个环形图
    // 💡 通过该方法可以创建一个上下文，可以同时访问到当前所遍历的元素，以及它的子元素
    // 💡 由于在回调函数 func 里 this 就指向当前所遍历的元素，可以通过 `d3.selection(this)` 创建（仅包含当前所遍历元素）的选择集，然后再通过方法 `selection.selectAll()` 获取子元素（其中 selection 表示通过 `d3.selection(this)` 所创建的选择集）
    .each(multiple)
  .select("g"); // 最后选择每个 <svg> 里的 <g> 容器（由于它经过了位置调整，便于后面为每个环形图添加文本注释）
// 绘制环形图的核心代码
// 传入的参数 `d` 是（包含一系列 svg 元素的）选择集当前遍历的元素所绑定的数据
// 它是一个对象 {state: string, sum: number, ages: array}
// 而函数内的 this 指向当前所遍历的元素，即相当于 nodes[i]
function multiple(d) {
  // 💡 通过 d3.selection(this) 创建的选择集，包含的元素视为父元素
  // 💡 以及 selection.selectAll() 创建的选择集，包含的元素视为子元素（或后代元素）
  // 💡 在该函数（环境/上下文）里可以同时访问父元素和子元素/后代元素
  // 💡 基于该州的人口总数，使用幂比例尺比例尺 radius 进行映射，计算出对应环形图的半径大小
  const r = radius(d.sum);
  // 返回的选择集所包含的元素是（在 <svg> 元素里所添加的）<g> 元素
  const svg = d3.select(this) // 💡 首先创建一个选择集，它包含当前所遍历的 <svg> 元素
      // 设置该 <svg> 元素的尺寸，它的宽和高都是环形图的直径
      .attr("width", r * 2)
      .attr("height", r * 2)
    // 创建一个 <g> 容器
    // 💡 这里会引起选择集变化，选中的元素是新增的（子元素）<g> 容器
    .append("g")
      // 通过 CSS transform 将容器 <g> 进行移动（向右移动半径长度 r，向下移动半径长度 r）
      // 让环形图的圆心绘制在 svg 的中心位置
      .attr("transform", `translate(${r},${r})`);
  // 在 <g> 容器里绘制一个环形图
  svg.selectAll(".arc") // 返回一个选择集，其中虚拟/占位元素是一系列的 <path class="arc"> 元素，用于分别环形图的各个扇形部分，💡 这里选中的是后代元素
      // 绑定数据
      // 调用饼图角度生成器 pie，对数据集 d.ages 进行转换处理
      // 计算出每个数据点（该州的各个年龄段）所对应的扇形的相关信息（主要是起始角和结束角）
      .data((d) => pie(d.ages))
    .enter().append("path") // 将元素绘制到页面上
      .attr("class", "arc") // 为各个 <path> 路径元素添加 CSS class "arc" 类名（对应上面选择集的操作）
      // 调用扇形生成器 arc
      // 同时还为扇形生成器设置内外半径，由于内半径不为 0 所以生成环状扇形（如果参数为 0 则生成完整扇形）
      // 由于扇形生成器并没有调用方法 area.context(canvasContext) 设置画布上下文
      // 所以调用扇形生成器 arc 返回的结果是字符串
      // 该值作为 `<path>` 元素的属性 `d` 的值
      .attr("d", arc.outerRadius(r).innerRadius(r * 0.6))
      // 设置颜色，不同扇形对应不同的颜色
      // 其中 d 是所绑定的数据（由饼图角度生成器所生成的），d.data 是原始数据点，所以 d.data.age 就是该扇形所对应的年龄段（名称）
      // 再通过颜色比例尺 color() 可以得到该扇形的相应颜色值
      .style("fill", (d) => color(d.data.age));
}