Javascript d3js:xaxis时间未显示完整的日期值

这是一个多曲线图：，它： 1.获取包含时间和其他属性的倍数值的二维数组

var values=[
 ["2011-10-01 20:46:04",63.4,42.7,12.2,44.2],
 ["2012-10-01 20:46:04",75.42,32.78.2.82.2],
 ["2013-10-01 20:46:04",73.4,20.7,92.2,75,4]
];

2.获取属性名称的数组

变量项=[“高兴”，“悲伤”，“愤怒”，“惊讶]

3.构建包含所有项目名称和值的json数组

var data = [
{"Year":"2011-10-01 20:46:04","Happy":63.4,"Sad":42.7,"Angry":12.2,"Surprised":44.2},
{"Year":"2012-10-01 20:46:04","Happy":75.4,"Sad":32.7,"Angry":78.2,"Surprised":82.2},
{"Year":"2013-10-01 20:46:04","Happy":73.4,"Sad":20.7,"Angry":92.2,"Surprised":75.4}];

---

4.使用数据数组，代码绘制一个多图表，其中xaxis=日期值，yaxis=数据数组中除日期值以外的其他值，代码工作正常，但问题是，一旦我引入的日期值变化非常慢（以秒为单位），轴轴不会显示完整的日期值，尽管xaxis将日期值作为变量，它适用于具有重要变化的日期值，但不适用于时间的小变化。

这是因为默认时间刻度格式化程序是如何设置的——请参阅。您可以通过引入自己的自定义多刻度时间格式来更改此设置，请参见例如。相关代码如下：

var customTimeFormat = timeFormat([
  [d3.time.format("%Y"), function() { return true; }],
  [d3.time.format("%B"), function(d) { return d.getMonth(); }],
  [d3.time.format("%b %d"), function(d) { return d.getDate() != 1; }],
  [d3.time.format("%a %d"), function(d) { return d.getDay() && d.getDate() != 1; }],
  [d3.time.format("%I %p"), function(d) { return d.getHours(); }],
  [d3.time.format("%I:%M"), function(d) { return d.getMinutes(); }],
  [d3.time.format(":%S"), function(d) { return d.getSeconds(); }],
  [d3.time.format(".%L"), function(d) { return d.getMilliseconds(); }]
]);

function timeFormat(formats) {
  return function(date) {
    var i = formats.length - 1, f = formats[i];
    while (!f[1](date)) f = formats[--i];
    return f[0](date);
  };
}

这将迭代时间格式，从最具体（最小）的格式开始，直到第二个参数中的函数返回一个计算结果为true的值。这样，您可以检查什么日期范围是重要的。例如，如果在小时之前的所有内容都为零，则更改仅在天中进行，不必显示任何小于该值的内容

---

我已经为您的示例更改了这一点，以包括小时和分钟，但您会注意到底部图表的刻度标签现在重叠了。当然，您可以对所有轴使用不同的多刻度时间格式。

不确定我是否理解正确。您希望链接到的代码生成的输出如何不同？xaxis values:date未以完整格式显示，exp:2013-10-08 18:36:25仅显示：20或：30（秒），尽管对于时间值变化较大的数据数组，相同的代码工作正常（显示完整的日期值）（您可以测试第一个已注释的数组以查看xaxis行为的差异）感谢Lars的解释：）