dc.js lineChart补全缺失日期，无数据处显示0值

这个问题我之前也碰到过，dc.js的分组（group）默认只会包含有实际数据的时间键，所以要让无数据的小时显示0而非直接连点，核心思路就是补全时间范围内的所有小时节点，给缺失数据的节点赋值0。下面是具体的实现步骤：

1. 先确定时间范围 #

首先从你的数据里提取出最早和最晚的小时，用来确定需要补全的时间区间：

// 从所有数据中提取datetime字段
var allDates = facts.map(function(d) { return d.datetime; });
// 取最早的小时（向下取整到小时）
var startHour = d3.time.hour.floor(d3.min(allDates));
// 取最晚的小时（向上取整到小时）
var endHour = d3.time.hour.ceil(d3.max(allDates));

2. 编写补全缺失小时的函数 #

我们可以封装一个函数，接收原分组、起始和结束小时，返回一个包含所有小时数据的新分组（缺失的小时value设为0）：

function fillMissingHours(group, startHour, endHour) {
  // 生成时间范围内的所有小时数组
  var hours = d3.time.hour.range(startHour, d3.time.hour.offset(endHour, 1));
  
  return {
    // 重写group的all()方法，返回补全后的数据
    all: function() {
      // 把原分组数据转成以时间戳为键的对象，方便快速查找
      var groupDataMap = group.all().reduce(function(map, d) {
        map[d.key.getTime()] = d.value;
        return map;
      }, {});
      
      // 遍历所有小时，补全数据
      return hours.map(function(hour) {
        var hourTimestamp = hour.getTime();
        return {
          key: hour,
          value: groupDataMap[hourTimestamp] || 0
        };
      });
    }
  };
}

3. 替换原分组为补全后的分组 #

用上面的函数处理你原来的eventsByDayGroup，然后把新分组传给lineChart：

// 生成补全后的分组
var filledEventsByDayGroup = fillMissingHours(eventsByDayGroup, startHour, endHour);

// 给lineChart设置补全后的分组
lineChart
  .dimension(eventsByDay)
  .group(filledEventsByDayGroup)
  // 其他图表配置（比如x轴用小时刻度等）
  .x(d3.time.scale().domain([startHour, endHour]))
  .xUnits(d3.time.hours);

补充说明 #

你提到的defined属性其实是用来控制哪些点需要被绘制（返回false就跳过该点），但我们的需求是要显示0值的点，而不是跳过，所以补全数据的方式才是正确的方向。这样处理后，你的折线图在无数据的时段（比如10点）就会显示0值的点，不会直接连接前后有数据的点了。

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