Question

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

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

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

假设我周二有4笔交易，周四有5笔交易。我需要证明周三有0笔交易。由于我的数据库中没有数据明确说明用户在Wedensday上没有进行任何交易，我是否需要在星期三时间（以及所有其他时间，具体取决于时间范围）传递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/

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

1 个答案: