Неправильное отображение входных данных csv на графике nvd3 (связано с временным форматированием)

Question

У меня проблема, когда я пытаюсь отобразить средние значения за один день;Часы, минуты (% 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
});

Плунжер

http://plnkr.co/edit/GYI8oq?p=info

Изображение проблемы: http://i.imgur.com/li1Vee2.png

Answer 1

Проблема в том, что в вашей функции сортировки вы предполагаете, что length это число, которым оно не является.В вашем случае вам даже не нужно сортировать, поскольку данные поступают отсортированными.Рабочий пример здесь.

В качестве альтернативы вы можете использовать функцию сортировки, которая работает со временем:

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 как имя атрибута - оно вступает в противоречие с .length это дает вам длину массива в Javascript и рано или поздно вызовет проблемы.