javascript - d3 图表的工具提示无法正确解析 2009 年 2 月

Question

我有一个面积图可以正确解析工具提示的日期——除了 2009 年 2 月。

这是一个演示问题的 Plunker:http://plnkr.co/edit/Yl4hUDVin2sZedu016Wm?p=preview

我认为这是有问题的代码:

  var mousex = d3.mouse(this);
  mousex = mousex[0] ;//+ 3; //7
  var invertedx = xScale.invert(mousex);
  var invertedxmo = xScale.invert(mousex);
  var invertedxyr = xScale.invert(mousex);

  function getMonth(date) {
    var month = date.getMonth() + 1;
    return month < 10 ? '0' + month : '' + month; 
  }

  invertedx = ("" + (invertedx.getMonth() + 1)).slice(-2) + '/' + invertedx.getFullYear();
  var selected = (d.values);

  for (var k = 0; k < selected.length; k++) {
    dates[k] = selected[k].x
    dates[k] = ("" + (dates[k].getMonth() + 1)).slice(-2) + '/' + dates[k].getFullYear();
  } 
  invertedxmo = ("" + (invertedxmo.getMonth() + 1)).slice(-2) ;
  var selectedmo = (d.values);

  for (var m = 0; k < selectedmo.length; k++) {
    dates[m] = selectedmo[m].x
    dates[m] = ("" + (dates[m].getMonth() + 1)).slice(-2) ;
  }       
  invertedxyr = invertedxyr.getFullYear();

  mousedate = dates.indexOf(invertedx);
  pro = d.values[mousedate].y

  var monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
  ];

我已经尝试更改 slice(-2)，这解决了 2009 年 2 月的问题，但它也为解析每年的 12 月日期带来了新问题。

谁能演示如何解决这个问题？

编辑/更新: 有趣的是，当我通过将第 16 行从 var startDate = d3.time.month.offset(new Date(), -108); 更改为 var startDate = d3 来修改图表的日期范围时.time.month.offset(new Date(), -119);，然后 2009 年 2 月解析得很好 — 但 2008 年 2 月会抛出错误!同样，如果我通过将第 16 行的偏移值更改为 -98 来缩小日期范围:2010 年 2 月会引发错误，但所有后续的 2 月解析都很好，所有其他日期也是如此。 (显然，如果您改为使用 slider 来缩小日期范围，错误仍然只会发生在最初加载图表时显示的第一个 2 月，也就是移动 slider 之前。)

因此，无论日期范围是 2008 年、2009 年、2010 年等，似乎始终是图表上的第一个 2 月产生此错误。第一个之后的所有后续 2 月都是解析得很好。

Answer 1

鼠标悬停代码中的代码没有问题。问题出在 DATE

今天的日期是 30 号，您生成开始日期的方式是:

d3.time.month.offset(new Date(), -108);

即它以 Sun Nov 30 2008 16:46:58 GMT-0500 (EST) 开始，并按照以下方式进行:

Sun Nov 30 2008 16:52:32 GMT-0500 (EST)
Tue Dec 30 2008 16:52:32 GMT-0500 (EST)
Fri Jan 30 2009 16:52:32 GMT-0500 (EST)
Mon Mar 02 2009 16:52:32 GMT-0500 (EST)
Thu Apr 02 2009 16:52:32 GMT-0400 (EDT)
.....

由于找不到 2009 年 2 月的第 30 日，它最终选择了 2009 年 3 月 2 日，并且从那里开始，每个月的第 2 天都会被挑选出来，这肯定会包括所有的二月。 (在 createDatesArr 函数中)

一种方法是从每月的第一天开始。

相关代码:

var currentDate = new Date();
var firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
var startDate = d3.time.month.offset(firstDay, -108);

已更新 Plunkr

希望这对您有所帮助。 :)