Javascript 错误显示nvd3图表的csv输入（与时间格式相关）

我有一个问题，我试图显示一天的平均值；小时，分钟（%H:%M），但图表无法正确解释数据并切换时间，23:30在00:00之后出现，造成混乱的显示

我认为这个问题与时间格式有关，但不确定如何设置。有人能辨别出哪里出了问题吗？任何提示都将不胜感激

代码

<script>
d3.csv("17_predicted_hourly_holiday.csv", function(error, data) {

  data.sort(function(a, b) {
    return a.length - b.length;
  });

  var exampleData = Object.keys(data[0]).filter(function(k) {
    return k != 'length'
  })
    .map(function(k) {
      return {
        'key': k,
        'values': data.map(function(d) {
          return [
            d3.time.format('%Y-%m-%d' + '%H:%M').parse("2000-01-01" + d.length),
            //d3.time.format('%Y-%b-%d' + '%H:%M:%S').parse("2000-01-01" + d.length + ':00')
            +d[k]
          ]
        })
      }
    });

  //alert(JSON.stringify(exampleData));
  console.log(exampleData);
  //console.log(data);

  var colors = d3.scale.category20();
  keyColor = function(d, i) {
    return colors(d.key)
  };

  var chart;

  nv.addGraph(function() {
    chart = nv.models.stackedAreaChart()
      .x(function(d) {
        return d[0]
      })
      .y(function(d) {
        return d[1]
      })
      .color(keyColor)
      .clipEdge(true);

    chart.xAxis
      .tickFormat(function(d) {
        return d3.time.format('%H:%M')(new Date(d));
      });
    chart.yAxis
      .tickFormat(d3.format(',.2f'));

    d3.select('#chart')
      .datum(exampleData)
      .transition().duration(500).call(chart);
    nv.utils.windowResize(chart.update);
    chart.dispatch.on('stateChange', function(e) {
      nv.log('New State:', JSON.stringify(e));
    });
    return chart;
  });
  // end read csv
});

d3.csv（“17小时预测假日.csv”），函数（错误，数据）{
数据排序（函数（a，b）{
返回a.length-b.length；
});
var exampleData=Object.keys（数据[0]）.filter（函数（k）{
返回k！=“长度”
})
.map（函数（k）{
返回{
“key”：k，
“值”：data.map（函数（d）{
返回[
d3.time.format（“%Y-%m-%d”+“%H:%m”）.parse（“2000-01-01”+d.length），
//d3.time.format（“%Y-%b-%d”+“%H:%M:%S”）.parse（“2000-01-01”+d.length+”：00）
+d[k]
]
})
}
});
//警报（JSON.stringify（exampleData））；
console.log（示例数据）；
//控制台日志（数据）；
var colors=d3.scale.category20（）；
keyColor=函数（d，i）{
返回颜色（d键）
};
var图；
nv.addGraph（函数（）{
chart=nv.models.stackedAreaChart（）
.x（功能（d）{
返回d[0]
})
.y（功能（d）{
返回d[1]
})
.颜色（keyColor）
.clipEdge（对）；
chart.xAxis
.d格式（函数（d）{
返回d3.time.format（“%H:%M”）（新日期（d））；
});
图1.yAxis
.tickFormat（d3.format（'，.2f'））；
d3.选择（“#图表”）
.数据（示例数据）
.transition（）.duration（500）.调用（图表）；
nv.utils.windowResize（图表更新）；
图.分派.on（'stateChange'，函数（e）{
log（'newstate:'，JSON.stringify（e））；
});
收益表；
});
//结束读取csv
});

Plunker

---

问题图片：

问题在于，在排序函数中，您假设

长度

是一个数字，而不是。在您的情况下，您甚至不需要进行排序，因为数据已排序。工作示例

或者，您可以使用与时间相关的排序功能：

data.sort(function(a, b) {
    return d3.time.format('%Y-%m-%d' + '%H:%M').parse("2000-01-01" + a.length) - d3.time.format('%Y-%m-%d' + '%H:%M').parse("2000-01-01" + b.length);
  });

完成演示

---

一般来说，不要使用

length

作为属性名——它与在Javascript中提供数组长度的

.length

冲突，迟早会导致问题。

您的排序函数不适用于字符串，您也不需要排序：啊，愚蠢的错误。谢谢你的帮助！