如何基于两个属性对D3堆叠水平条形图排序

要实现先按y轴标签（scale）字母排序，再按x轴数值总和升降序的双属性排序，只需修改d3.groupSort的排序函数，让它返回一个包含两个排序依据的数组（先按scale字母，再按数值总和）。

修改后的完整配置代码如下：

chartGenerate = stackedBarChart(pandas, 
  {
    x: d => d.value,
    y: d => d.scale,
    z: d => d.key,
    yDomain: d3.groupSort(pandas, 
      // 排序依据数组：先按scale字母顺序，再按数值总和的升降序
      D => [
        D[0].scale, // 同一分组的scale值完全一致，取第一个元素即可代表分组标签
        order === "ascending" ? d3.sum(D, d => d.value) : -d3.sum(D, d => d.value)
      ], 
      d => d.scale
    ),
    zDomain: key,
  }
)

关键逻辑说明 #

1. 双条件排序：d3.groupSort支持通过返回数组实现多维度排序，优先比较数组第一个元素（scale的字母顺序），仅当第一个元素相同时，才会比较第二个元素（数值总和）。
2. 字母排序：直接使用D[0].scale作为第一排序键，默认按字符串的自然字母顺序升序排列。
3. 数值升降序控制：
   • 当order为"ascending"时，返回总和的正值，让总和较小的分组排在前面（升序）。
   • 当order为"descending"时，返回总和的负值，让总和较大的分组排在前面（降序）。

内容的提问来源于stack exchange，提问作者alanders