如何格式化或自定义dc.js dataTable的section分区标签

你需要使用dc.js内置的sectionLabel方法实现分组键和显示标签分离，具体实现逻辑如下：

• section回调保持返回可正确排序的YYYYMMDD格式数值作为分组键，保证分区的自然排序符合时间顺序，避免字母排序出错
• 调用sectionLabel方法传入格式化回调，该回调接收section返回的键值作为入参，你可以在回调内将数值转换为符合本地格式要求的“月-日-年”字符串作为分区显示标签

示例代码如下：

// 假设你已经完成crossfilter维度、实例初始化等前置操作
const yourDataTable = new dc.DataTable('#your-table-container')
  .dimension(yourDimension)
  .group(d => d)
  // 分组键用YYYYMMDD数值，保证排序正确
  .section(d => {
    return +d3.timeFormat('%Y%m%d')(d.recordDate); // recordDate替换为你自己的日期字段
  })
  // 自定义分区显示标签
  .sectionLabel(sectionKey => {
    const parseDate = d3.timeParse('%Y%m%d')(sectionKey.toString());
    return d3.timeFormat('%m-%d-%Y')(parseDate); // 输出你需要的月-日-年格式
  })
  // 其余配置项保持不变
  .columns(['field1', 'field2', 'field3'])
  .size(Infinity)

yourDataTable.render();

补充说明 #

• 分区的排序逻辑是优先使用section返回键值的自然排序，所以你不需要调用sortBy调整分区顺序，只要保证section返回的键值本身的自然顺序符合需求即可
• 如果需要调整分区排序为倒序，直接调用order(dc.descending)配置即可，该配置对分区排序生效
• sectionLabel方法从dc.js 2.1.0版本开始提供，只要不是使用过于老旧的版本都可以直接调用

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