javascript - 如何在 d3.js/JavaScript 中将零值添加到时间序列中

Question

这是我以前使用 php 或(我认为是)不必要的复杂 MySQL 查询解决的问题，但我突然认为在 JavaScript/d3.js 中必须有更优雅的解决方案。

假设我有一个日期和值的数据集，我想将其转换为 d3.js 中的条形图。

date,value
2013-01,53
2013-02,165
2013-03,269
2013-04,344
2013-05,376
2013-06,410
2013-07,421
2013-09,376
2013-10,359
2013-11,392
2013-12,433
2014-01,455
2014-02,478

您会注意到数据中没有第 8 个月(8 月)的条目。假设 8 月是零值，最终结果是生成的条形图看起来正常，但当然没有第 8 个月应该是差距(零)。

我有一个 jsfiddle of the script and data here供引用。

我考虑过尝试添加一个填充有零的完整数据集，然后对其进行迭代以包含数据中的值，但这似乎也过于复杂。我假设有一个优雅的解决方案，但我太无知了。

感谢您的帮助。

编辑 #1:回应 explunit 的回答:

理想情况下，解决方案应该是对数据系列的操作，而不是仅适用于条形图。这意味着相当于 this jsfiddle 处的折线图中间会突然下降。

编辑#2:玩了一会儿之后:

在尝试了 Google groups page here 上的建议之后，我已经设法得到一段代码来做我正在寻找的事情。它获取时间戳数据，根据时间范围创建一个域，并创建一个包含不同月份的单独数组(在本例中)。然后我粗略地遍历两个数组集，并将适合于初始(未完全填充时间值)数组的值添加到具有所有时间值(和数据值最初设置为零)的数组中。

最终结果是一个折线图，最初看起来像这样，因为它在 2013 年 7 月和 2013 年 9 月之间迭代；

随后呈现为这样，因为八月的值将添加为零；

有一个jsfiddle of the code here ;

我先说。虽然它正在完成我在这种情况下想要的工作，但它距离优雅或可扩展还有很长的路要走。如果比我聪明的人能够看出如何减少这种冒犯，我将不胜感激。

Answer 1

我对你的整体方法没有太大改进，但如果你使用更多内置方法并添加下划线/lodash，你可以使数据转换更短:

x.domain(d3.extent(data, function(d) { return d.date; })).ticks(d3.time.month);
y.domain([0, d3.max(data, function(d) { return d.value; })]);

var newData = x.ticks().map(function(monthBucket) {
    return _.find(data, {date: monthBucket}) || {date: monthBucket, value: 0};
});

如果我们告诉它应该使用月度节拍，那么我们就可以再次取回节拍数组，而不是构建一个单独的桶数组。

然后从那时起我们只使用 .map 而不是 for 循环和 lodash(或下划线)_.find 方法来匹配直到我们的原始数据。 在这里更新了 fiddle :http://jsfiddle.net/a5jUz/3/

---

下面的原始答案...以防您想使用 D3 标度来散布条形图上的值:

1 - 你必须使用时间尺度而不是顺序尺度:

var x = d3.time.scale().range([0, width]);

2 - 您需要根据日期范围的最小值/最大值设置该比例的域:

x.domain(d3.extent(data, function(d) { return d.date; })).nice();

3 - [难看的部分] 现在您没有使用序数刻度，您没有用于条形定位的 rangeBand 函数:

  // TODO: calculate based on overall width & number of data points  
  .attr("x", function(d) { return x(d.date); })
  .attr("width", 16)

更新 fiddle 在这里: http://jsfiddle.net/LWyjf/