Question

我正在制作一个Dimple / D3图表，将缺失天数的数据绘制为0.

date                fruit   count
2013-12-08 12:12    apples  2
2013-12-08 12:12    oranges 5
2013-12-09 16:37    apples  1
                             <- oranges inserted on 12/09 as 0
2013-12-10 11:05    apples  6
2013-12-10 11:05    oranges 2
2013-12-10 20:21    oranges 1

我几乎可以得到nrabinowitz的excellent answer to work。

我的数据的时间戳格式为YYYY-MM-DD HH-MM，并且以天为单位的散列+ D3.extent时间间隔会导致每天午夜0点，即使同一天晚些时候有数据存在。

我找到的几乎是use .setHours(0,0,0,0) to discard the hours/minutes的解决方案，所以所有数据都显示为午夜：

...
var dateHash = data.reduce(function(agg, d) { 
 agg[d.date.setHours(0,0,0,0)] = true; 
 return agg; 
}, {});
...

当每天每天只有1个条目时，这可以正常工作，但是当有多个条目将值加在一起时。所以在上面的12/10数据中：苹果：6，橙子：3。

理想情况下（在我看来）我会将绘图数据与日期分区以及散列丢弃小时/分钟分开。这会将午夜 - 日期与D3天间隔进行比较，在缺少数据的日子午夜填写0，然后绘制完整的小时/分钟的真实点。

我已尝试data2 = data.slice()后跟setHours，但图表仍然获得了午夜点数：

...
// doesn't work, original data gets converted
var data2 = data.slice();
var dateHash = data2.reduce(function(agg, d) { 
 agg[d.date.setHours(0,0,0,0)] = true; 
 return agg; 
}, {});
...

支持nrabinowitz，这是改编的代码：

// 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;

// arrr this almost works except if multiple entries per day
//    agg[d.date.setHours(0,0,0,0)] = true; 

      return agg;
  }, {}),
  headers = ["date", "fruit", "count"];

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

（我不关心小时刻度中的0分，只关注日报。如果time.interval从几天改为几小时，我怀疑散列和D3会处理它。）

如何将datehash与数据分开？那是我应该做的吗？

Answer 1

我想不出一个顺利的方法来做到这一点，但我已经编写了一些自定义代码，可以与您的示例一起使用，并且可以使用您的实际情况。

var svg = dimple.newSvg("#chartContainer", 600, 400),
    data = [
        { date : '2013-12-08 12:12', fruit : 'apples', count : 2 },
        { date : '2013-12-08 12:12', fruit : 'oranges', count : 5 },
        { date : '2013-12-09 16:37', fruit : 'apples', count : 1 },
        { date : '2013-12-10 11:05', fruit : 'apples', count : 6 },
        { date : '2013-12-10 11:05', fruit : 'oranges', count : 2 },
        { date : '2013-12-10 20:21', fruit : 'oranges', count : 1 }
    ],
    lastDate = {},
    filledData = [],
    dayLength = 86400000,
    formatter = d3.time.format("%Y-%m-%d %H:%M");

// The logic below requires the data to be ordered by date
data.sort(function(a, b) { 
    return formatter.parse(a.date) - formatter.parse(b.date); 
});

// Iterate the data to find and fill gaps
data.forEach(function (d) {

    // Work from midday (this could easily be changed to midnight)
    var noon = formatter.parse(d.date).setHours(12, 0, 0, 0);

    // If the series value is not in the dictionary add it
    if (lastDate[d.fruit] === undefined) {
        lastDate[d.fruit] = formatter.parse(data[0].date).setHours(12, 0, 0, 0);
    }

    // Calculate the days since the last occurance of the series value and fill
    // with a line for each missing day
    for (var i = 1; i <= (noon - lastDate[d.fruit]) / dayLength - 1; i++) {
        filledData.push({ 
            date : formatter(new Date(lastDate[d.fruit] + (i * dayLength))), 
            fruit : d.fruit, 
            count : 0 });
    }

    // update the dictionary of last dates
    lastDate[d.fruit] = noon;

    // push to a new data array
    filledData.push(d);

}, this);

// Configure a dimple line chart to display the data
var chart = new dimple.chart(svg, filledData),
    x = chart.addTimeAxis("x", "date", "%Y-%m-%d %H:%M", "%Y-%m-%d"),
    y = chart.addMeasureAxis("y", "count"),
    s = chart.addSeries("fruit", dimple.plot.line);
s.lineMarkers = true;
chart.draw();

你可以在这里看到这个小提琴：

http://jsfiddle.net/LsvLJ/

从datahash中分离数据

1 个答案: