Question

更新：jsfiddle示例说明了问题：http://jsfiddle.net/T8SuH/

我是D3js和JavaScript的新手，但对Java很熟悉。我有一个来自自行车共享系统的大型CSV数据集，其组织如下：

event_id, station_id, timestamp, number_of_bikes, number_of_empty_docks

为了减小文件大小，我的数据文件仅包含各个站的新事件。因此，不同站的时间戳既不是规则的时间间隔也不是一致的。例如，连续的条目可能如下所示：

31044955, 08, 2012-05-01 00:00:00, 9, 6
31044965, 23, 2012-05-01 00:32:00, 2, 6
31044972, 02, 2012-05-01 00:44:00, 10, 5
31044999, 17, 2012-05-01 02:10:10, 12, 6
...

我想创建一个堆积区域图表，其中x轴是时间（24小时），y轴是（堆叠）选定工作站的库存。 D3 Wiki提到数据应该在计算堆栈之前进行插值。我考虑两种方法： - 在D3之外插入我的数据集（使用Java）并将其保存为新的CSV文件，其中所有工作站都具有并发时间戳。这种方法会使我的文件大小增加6倍以上（目前为25MB），我担心D3在处理它时会很慢。 - 在执行堆栈或绘制区域/路径之前，在D3 / Javascript内插入数据。

虽然我觉得第二种方式会更快（在性能方面），但我不知道如何做到这一点，我没有找到任何相关的教程/示例。我只是猜测我必须创建一个范围（d3.time.minute.range），然后将它与map（）函数一起使用来创建一个新数组？有人可以提出一个建议，如何在堆叠它们之前以不规则的时间间隔插入多个数据集（例如每个工作站），在D3内部？

提前谢谢。

Answer 1

之前我遇到过同样的问题。通过一点点精致，您可以添加缺失值，以便每个系列都具有相同的x坐标集（时间戳）。在您将数据发送到堆栈布局之前，我向jsfiddle添加了几行来按摩数据。

首先，我需要超级时间：

var times = [];
myData.forEach(function(d) {
  if(times.indexOf(d.date.getTime()) === -1) {
    times.push(d.date.getTime());
  }
});
times.sort();

这会产生数组（来自您的数据）：

0:00, 4:00, 4:30, 4:45, 8:08, 12:08, 13:08, 16:08, 20:08

请注意，最后我对其进行排序，因为这样可以简化在工作站数据系列中查找缺失值的过程。我打算做一种排序列表合并，以在系列中填入无变化数据值。这就是您的系列直接来自数据（时间值对）：

Initial series
Station_1 0:00 37, 4:30 36, 8:08 18, 12:08 10, 16:08 32, 20:08 35
Station_2 0:00 32, 4:00 29, 8:08 6,  12:08 12, 16:08 29, 20:08 32
Station_3 0:00 36, 4:45 30, 8:08 10, 13:08 13, 16:08 32, 20:08 36
Station_4 0:00 31, 4:00 28, 8:08 12, 12:08 14, 16:08 28, 20:08 31

因此，对于每个系列，遍历时间数组并插入缺失值，可能有更有效的方法来执行此操作：

myNestedData.forEach(function(stationData) {
  stationData.values.sort(function(a,b) {
      return d3.ascending(a.date.getTime(), b.date.getTime());
    });
  var j = 0;
  var lastStationValue = 0;
  for(var i = 0; i < times.length; i++) {
    // If the station series is too short I should not equal any 
    // value from the times array
    stationTime = j <= stationData.values.length ?
        stationData.values[j].date.getTime() : 0;

    if(times[i] !== stationTime) {
      // Missing values need to be spliced in.
      stationData.values.splice(j, 0, { 
          date: new Date(times[i]),
          inventory: lastStationValue,
          station_id: stationData.key
      });
      j++;
    }
    else {
      // We have a value for this time, move along.
      lastStationValue = stationData.values[j].inventory;
      j++;
    }
  }                       
});

现在这个系列应该排好了！

Station_1 0:00 37, 4:00 37, 4:30 36, 4:45 36, 8:08 18, 12:08 10, 13:08 10, 16:08 32, 20:08 35
Station_2 0:00 32, 4:00 29, 4:30 29, 4:45 29, 8:08 6,  12:08 12, 13:08 12, 16:08 29, 20:08 32
Station_3 0:00 36, 4:00 36, 4:30 36, 4:45 30, 8:08 10, 12:08 10, 13:08 13, 16:08 32, 20:08 36
Station_4 0:00 31, 4:00 28, 4:30 28, 4:45 28, 8:08 12, 12:08 14, 13:08 14, 16:08 28, 20:08 31

您可以查看更新的小提琴here

D3js：如何在堆叠数据集之前插入具有不规则时间间隔的数据集？

1 个答案: