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 = ['快乐'，'悲伤'，'愤怒'，'惊讶'];

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 =数据数组中除日期值以外的其他值，代码工作正常但问题是我引入的日期值变化很慢（以秒为单位）轴轴不显示完整的日期值，尽管x轴将日期值作为变量，并且它与日期值一起使用时具有重要的变化，但不适用于小的时间变化。

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更改为包括小时和分钟，但您会注意到底部图表的刻度标签现在重叠。当然，您可以为所有轴使用不同的多尺度时间格式。

d3js：x轴时间未显示完整的日期值

1 个答案: