DC.js与Crossfilter复合图问题：数据值为0时折线消失

我之前在使用DC.js和Crossfilter构建复合图表时，也碰到过完全一样的问题——当柱状图数值为0或者度量值最后一个数是0时，折线就莫名消失了。下面是我总结的针对性解决思路和代码方案：

问题根源 #

本质原因是Crossfilter的组默认只会返回包含数据的bin，当某个bin的计算值为0时，它不会被包含在group.all()的结果里。而DC.js的折线图依赖这些bin数据来绘制，缺失的0值bin就会导致折线断开甚至完全消失。

解决方案 #

1. 补全所有空bin（包含数值为0的情况） #

我们需要自定义一个组包装函数，强制让Crossfilter返回所有应该存在的bin，哪怕对应的数值是0。比如针对日期维度的场景：

// 补全空bin的工具函数
function add_empty_bins(source_group) {
  return {
    all:function () {
      var orig_all = source_group.all();
      // 获取维度的范围（比如日期的起止）
      var domain_extent = d3.extent(orig_all, function(d) { return d.key; });
      // 生成范围内的所有日期（如果是类别维度，就生成所有类别）
      var all_keys = d3.timeDays(domain_extent[0], d3.timeDay.offset(domain_extent[1], 1));
      // 遍历所有key，匹配原组的数据，没有的话返回值为0的项
      return all_keys.map(function(key) {
        var item = orig_all.find(function(d) { 
          // 日期比较要注意getTime()，避免时区问题
          return d.key.getTime() === key.getTime(); 
        });
        return item || {key: key, value: 0};
      });
    }
  };
}

// 使用这个函数包装你的度量组
var dateDimension = crossfilter(data).dimension(function(d) { 
  return d3.timeParse("%Y/%m/%d")(d.TxDate); 
});
// 补全NTS和NTS2的组数据
var ntsGroup = add_empty_bins(dateDimension.group().reduceSum(function(d) { return d.NTS; }));
var nts2Group = add_empty_bins(dateDimension.group().reduceSum(function(d) { return d.NTS2; }));

2. 确保折线图渲染所有点 #

即使补全了bin，有时候折线图还是会因为x轴范围问题漏掉最后一个0值点，这时候可以通过renderlet事件手动修正：

lineChart.on('renderlet', function(chart) {
  var allData = chart.group().all();
  var xDomain = chart.x().domain();
  var lastKey = allData[allData.length - 1].key;
  
  // 检查x轴是否包含最后一个key，没有的话更新并重新绘制
  if(xDomain[xDomain.length - 1].getTime() !== lastKey.getTime()) {
    xDomain.push(lastKey);
    chart.x().domain(xDomain);
    chart.redraw();
  }
});

3. 额外配置：避免折线过滤0值 #

检查你的折线图代码，确保没有启用过滤空值的设置，比如data(function(d) { return d.value > 0; })这类代码，把它去掉，让所有0值点都被渲染。

验证效果 #

把上面的代码替换到你的复合图表逻辑中后：

• 当柱状图某个bin数值为0时，折线图会在对应位置显示0值点，不会断开
• 即使最后一个度量值是0，折线也会延伸到该点，不会消失

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