javascript - 解析日期时浏览器挂起

Question

当我对日期使用虚拟数据时，即当我只使用年份时，我已经成功地让这种可视化(小倍数的堆积面积图)以稍微不同的形式工作。但是，当我使用这样的实际日期时，就会出现问题:

Record,Code,2008-1-1,2008-2-1,2008-3-1,2008-4-1,2008-5-1,2008-6-1,2008-7-1...

代替这个虚拟数据，效果很好

Record,Code,1895,1896,1897,1898,1899,1900,1901...

当我使用完整日期时，浏览器挂起；没有错误信息。我以前修复过解析错误，但这一个似乎超出了我的能力范围。

这是不工作的 Plunker:https://plnkr.co/edit/fOlpxo648OyCSM7Sq8ak?p=preview另一个 Plunker，一个实际加载但使用虚拟数据的 Plunker，位于该问题的底部。

这段代码似乎特别有问题:

function createDatesArr(start, end) {
var arr = [];
for (var i = start; i <= end; i++ ) {
    arr.push((i));  //      arr.push(String(i));
}
return arr;
}

在稍微不同的形式中，我会收到一条错误消息，指出“日期”尚未定义。我试图用以下代码解决这个问题:

var dateFormat = d3.time.format("%Y-%m-%d");
var startDate = new Date('2008-1-1');
var endDate = new Date ('2017-12-1');
var dates = createDatesArr(startDate, endDate); 

或者像这样:

var dateFormat = d3.time.format("%Y-%m-%d");
var startYear = "2008-1-1";
var endYear = "2017-12-1";
var dates = createYearsArr(startYear, endYear);

或者像这样:

var dateFormat = d3.time.format("%Y-%m-%d");
var startDate = d3.min(dataset, function(d) { return d.Date; });
var endDate = d3.max(dataset, function(d) { return d.Date; });
var dates = createDatesArr(startDate, endDate);

或者，也可以像这样定义“日期”:

d3.csv(dataPath, function(data) {
    var dates = d3.keys(data[0]).slice(1);
    data = data.filter(function(d) {
            return true;
    });
    var dates = d3.keys(data[0]).slice(1);

这些都没有用，但我希望有人能帮我解决这个问题。

这是另一个实际有效的 Plunker，它展示了我最终想要实现的目标，尽管对日期使用了虚拟数据(仅限年份):http://plnkr.co/edit/jRC8iQg2kdtlZWtGE020?p=preview

请帮忙。

Answer 1

你是对的，你的问题在这段代码中

function createDatesArr(start, end) {
  var arr = [];
  for (var i = start; i <= end; i++ ) {
    arr.push((i));  //      arr.push(String(i));
  }
  return arr;
}

这里更准确 - i++;

看下面的图片，变量 i 它是一个以毫秒为单位的日期。在每次循环迭代后将其增加一毫秒。但是，在我看来，您的数据点之间的间隔是一个月。

记录,代码,2008-1-1,2008-2-1,2008-3-1,2008-4-1,2008-5-1,2008-6-1,2008-7- 1...

所以你应该在每次循环迭代后将 i 增加一个月来解决你的问题。

你可以用 d3.time.month.offset 来做:

for (var i = start; i <= end; i = d3.time.month.offset(i, 1)) {
  arr.push((i));
}

在那之后，你应该删除 dateFormat(...) 因为数据项它是完全有效的 javascript 日期并稍微重写 transformData 函数，看看我的 fork of you plnkr (它看起来像是颜色应用不正确，我认为你可以修复它，但除此之外它仍然有效。