代码之家 › 专栏 › 技术社区 › NorthSide

dc。js折线图-填写缺失的日期并在没有数据的情况下显示零

linechart dc.js

NorthSide · 技术社区 · 7 年前

我有个dc。显示每小时事件数的js折线图。我希望不要将两个已知值之间的线连接起来,而是将值显示为零。

因此,对于下面的数据,我希望在上午10点将测线降至零

{datetime: "2018-05-01 09:10:00", event: 1}
{datetime: "2018-05-01 11:30:00", event: 1}
{datetime: "2018-05-01 11:45:00", event: 1}
{datetime: "2018-05-01 12:15:00", event: 1}

var eventsByDay = facts.dimension(function(d) { return d3.time.hour(d.datetime);});
var eventsByDayGroup = eventsByDay.group().reduceCount(function(d) { return d.datetime; });

我已经看了定义,但不认为这是正确的,我想我需要在没有数据的每小时的数据中添加零值?然而,我不知道如何去做,我似乎找不到一个例子来说明我在华盛顿的尝试。js公司

除了d3之外,这个问题确实回答了这个问题。我不知道怎么翻译- d3 linechart - Show 0 on the y-axis without passing in all points?

有人能给我指出正确的方向吗?

谢谢

1 回复 | 直到 5 年前

Gordon 7 年前

您在正确的轨道上 ensure_group_bins 但是,在这种情况下,我们需要计算它们,而不是事先知道所需的垃圾箱集。

幸运的是d3提供 interval.range 它为两个日期之间的每个间隔边界返回一个日期数组。

然后,我们需要将该排序集与原始组中的箱子合并。也许我有点过度设计了,但这里有一个函数可以做到这一点:

function fill_intervals(group, interval) {
  return {
    all: function() {
      var orig = group.all().map(kv => ({key: new Date(kv.key), value: kv.value}));
      var target = interval.range(orig[0].key, orig[orig.length-1].key);
      var result = [];
      for(var oi = 0, ti = 0; oi < orig.length && ti < target.length;) {
        if(orig[oi].key <= target[ti]) {
          result.push(orig[oi]);
          if(orig[oi++].key.valueOf() === target[ti].valueOf())
            ++ti;
        } else {
          result.push({key: target[ti], value: 0});
          ++ti;
        }
      }
      if(oi<orig.length)
        Array.prototype.push.apply(result, orig.slice(oi));
      if(ti<target.length)
        Array.prototype.push.apply(result, target.slice(ti).map(t => ({key: t, value: 0})));
      return result;
    }
  }
}

基本上,我们迭代原始箱子和目标箱子,取两者中较低的一个。如果它们是相同的,那么我们增加两个计数器;否则,我们只需增加较低的值。

最后,当任何一个数组用完时,我们将附加来自另一个数组的所有剩余结果。

Here is an example fiddle based on your code.

它是用D3v4编写的,但您只需更改 d3.timeHour 在两个地方 d3.time.hour 与D3v3一起使用。

我会将此功能添加到FAQ!