عرض خاطئ لإدخال ملف 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 وسيسبب مشاكل عاجلاً أم آجلاً.