dc.js/d3折线图x轴按序显示月份名称及数据聚合渲染问题

问题场景 #

• 需求：折线图x轴按一月至十二月的自然顺序显示月份名称，每个月份聚合所有年份的同月份数据（如一月条目汇总2020-2022年所有一月的数值，仅展示单个一月条目）
• 现状：同逻辑在柱状图下运行正常，可实现x轴刻度重排，迁移到折线图后出现渲染错位、线条乱连的异常
• 异常截图：
  

原有核心代码 #

function Dimension() {
    return Data.ndx.dimension(function (d) { return moment.localeData()._months[d["DATE"].getMonth()]; });
}
    
function Group(thisDim) {
    var thisVal = thisDim.group().reduceSum(function (d) { return d["VALUE"]; });
    return thisVal;
}

var thisDim = Dimension();
var thisVal = Group();
chartObject.dimension(thisDim).group(thisVal)
                .title(function (d) {   return d.key; })
                .ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
                .label(function (d) {  return d.key;})
                .margins({top: 10, right: 10, bottom: 30, left: 70})
                .elasticY(true)
                ;
for (var i=0;i<12;i++) x.push(moment.localeData()._months[i]);
    chartObject.x(d3.scaleBand().domain(x)).xUnits(dc.units.ordinal);

问题原因 #

1. 比例尺适配问题：dc.js柱状图（barChart）天然适配d3.scaleBand（分栏比例尺，自带带宽属性，适配柱形宽度计算），但折线图（lineChart）是基于离散点定位绘制连线，直接使用d3.scaleBand会取每个分栏的左边界作为点坐标，导致点位偏移、连线错位。
2. 排序规则缺失：crossfilter分组返回的键顺序由数据首次出现的顺序决定，未显式指定排序规则时，图表可能不按照预设的1-12月domain顺序取点，加剧连线错乱。

修复方案 #

1. 将折线图x轴的比例尺从d3.scaleBand()替换为d3.scalePoint()（点比例尺，专门适配折线、散点这类离散点定位场景，自动将点放在每个分类的中心位置）
2. 显式添加排序配置，强制图表按照1-12月的固定顺序取数据点
3. 提前统一定义固定顺序的月份列表，避免多处重复生成月份数组导致顺序不一致

修正后代码 #

// 统一定义固定顺序的月份列表
const monthList = [];
for (let i = 0; i < 12; i++) {
  monthList.push(moment.localeData()._months[i]);
}

function Dimension() {
    return Data.ndx.dimension(function (d) { return moment.localeData()._months[d["DATE"].getMonth()]; });
}
    
function Group(thisDim) {
    var thisVal = thisDim.group().reduceSum(function (d) { return d["VALUE"]; });
    return thisVal;
}

var thisDim = Dimension();
var thisVal = Group();
chartObject
  .dimension(thisDim)
  .group(thisVal)
  .title(function (d) { return d.key; })
  .ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
  .label(function (d) { return d.key;})
  .margins({top: 10, right: 10, bottom: 30, left: 70})
  .elasticY(true)
  // 按月份在固定列表中的索引排序，保证点位顺序正确
  .ordering(function(d) { return monthList.indexOf(d.key); })
  // 替换为点比例尺适配折线图
  .x(d3.scalePoint().domain(monthList))
  .xUnits(dc.units.ordinal);

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