d3.js - d3 折线图 - 在 y 轴上显示 0 而不传入所有点？

Question

我有一个折线图。其目的是显示给定时间段内每个用户的交易量。

为此，我要获取所有用户交易的日期。我正在处理这个例子:http://bl.ocks.org/mbostock/3884955并让折线图重新渲染良好。

我的 x 轴是时间，y 轴是交易数量。我遇到的问题是在没有事件时显示日期。

假设我周二有 4 笔交易，周四有 5 笔交易。我需要证明周三有 0 笔交易。由于我的数据库中不存在明确说明用户在星期三没有进行任何交易的数据，我是否需要在星期三时间(以及所有其他时间，取决于时间范围)传递 0 值？或者我可以用 d3 来做吗？我似乎找不到任何适合我的问题的例子。

Answer 1

这似乎是一个很常见的问题，所以我在这里编写了一个示例实现:http://jsfiddle.net/nrabinowitz/dhW2F/2/

相关代码:

  // get the min/max dates
  var extent = d3.extent(data, function(d) { return d.date; }),
      // hash the existing days for easy lookup
      dateHash = data.reduce(function(agg, d) {
          agg[d.date] = true;
          return agg;
      }, {}),
      // note that this leverages some "get all headers but date" processing
      // already present in the example
      headers = color.domain();

    // make even intervals
    d3.time.days(extent[0], extent[1])
        // drop the existing ones
        .filter(function(date) {
            return !dateHash[date];
        })
        // and push them into the array
        .forEach(function(date) {
            var emptyRow = { date: date };
            headers.forEach(function(header) {
                emptyRow[header] = null;
            });
            data.push(emptyRow);
        });
    // re-sort the data
    data.sort(function(a, b) { return d3.ascending(a.date, b.date); });

正如您所看到的，它有点复杂，但似乎运行良好 - 您可以使用方便的 d3.interval.range 制作一组均匀间隔的日期。方法，过滤掉数据中已经存在的日期，并使用剩余的日期推送空行。一个缺点是大型数据集的性能可能会很慢 - 这假设整行都是空的，而不是不同系列中的不同空日期。

一个替代表示，用间隙(使用 line.defined )而不是零点，在这里: http://jsfiddle.net/nrabinowitz/dhW2F/3/