javascript - d3js :The xaxis time is not showing the complete date value

Question

这是一个多图表图:see code ， 那: 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.获取属性名称数组

var items=['Happy','Sad','Angry','Surprised'];

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 将日期值作为变量，但 axis 轴不显示完整的日期值，并且它可以很好地处理具有重要变化的日期值，但不适用于时间的小变化。

Answer 1

这是因为默认的时间刻度格式化程序是如何设置的——参见 the documentation .您可以通过引入自己的自定义多尺度时间格式来更改此设置，请参见例如this example .相关代码是这样的:

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 的值。这样，您可以检查重要的日期范围。例如，如果直到小时的所有内容都为零，则变化仅在几天内发生，没有必要显示比这更小的任何内容。

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