График D3 с данными JSON в ISO 8601 Формат

Question

Я пытаюсь отобразить данные JSON. Я новичок в js и d3. Я могу отформатировать даты ISO 8601 по оси x, но я не могу заставить эту строку отображаться. Ось и ось х отображаются очень хорошо. Я продолжаю получать сообщение об ошибке «Ошибка: недопустимое значение для атрибута d =» MNaN, -708.1292215027511LNaN. » Я ДУМАЮ, что проблема связана с привязкой моих точек данных к оси. Я бы хотел использовать дата по оси x и процессор по оси y.

Сообщите мне, если у вас есть предложения, которые помогут моей линии («путь»). Любые объяснения о том, как справляться с датами ISO 8601, будут также очень полезно спасибо !!

<script> 

     //JSON data for graph 
     var data = [ 
     { 

      "date": "2015-04-01T00:00:00", 
      "Logon": "1535.000000", 
      "ServerExport": "704.000000", 
      "Processor": "15.268909", 
      "AdminLogon": "1731.000000" 
     }, 
     { 

      "date": "2015-04-01T00:10:00", 
      "Logon": "1995.000000", 
      "ServerExport": "630.000000", 
      "Processor": "15.585726", 
      "AdminLogon": "1951.000000" 
     }, 
     { 

      "date": "2015-04-01T00:20:00", 
      "Logon": "1946.500000", 
      "ServerExport": "653.500000", 
      "Processor": "10.585794", 
      "AdminLogon": "1903.500000" 
     }, 
     { 

      "date": "2015-04-01T00:30:00", 
      "Logon": "1851.500000", 
      "ServerExport": "650.500000", 
      "Processor": "5.999048", 
      "AdminLogon": "1830.000000" 
     }, 
     { 

      "date": "2015-04-01T00:40:00", 
      "Logon": "1732.500000", 
      "ServerExport": "685.000000", 
      "Processor": "10.097523", 
      "AdminLogon": "1864.000000" 
     }, 
     { 

      "date": "2015-04-01T00:50:00", 
      "Logon": "1622.000000", 
      "ServerExport": "664.500000", 
      "Processor": "7.387592", 
      "AdminLogon": "1757.000000" 
     }, 
     { 

      "date": "2015-04-01T01:00:00", 
      "Logon": "995.000000", 
      "ServerExport": "508.500000", 
      "Processor": "8.683075", 
      "AdminLogon": "1438.000000" 
     }, 
     { 

      "metricDate": "2015-04-01T01:10:00", 
      "Logon": "1416.666666", 
      "ServerExport": "723.000000", 
      "Processor": "12.205153", 
      "AdminLogon": "1721.500000" 
     }, 
     { 

      "date": "2015-04-01T01:20:00", 
      "Logon": "1245.500000", 
      "ServerExport": "631.500000", 
      "Processor": "14.483815", 
      "AdminLogon": "1661.500000" 
     }, 
     { 

      "date": "2015-04-01T01:30:00", 
      "Logon": "1162.500000", 
      "ServerExport": "593.500000", 
      "Processor": "19.331836", 
      "AdminLogon": "1642.500000" 
     }, 
     { 

      "date": "2015-04-01T01:40:00", 
      "Logon": "1094.000000", 
      "ServerExport": "573.000000", 
      "Processor": "1.011995", 
      "AdminLogon": "1559.500000" 
     }, 
     { 

      "date": "2015-04-01T01:50:00", 
      "Logon": "1054.000000", 
      "ServerExport": "542.500000", 
      "Processor": "11.102191", 
      "AdminLogon": "1460.000000" 
     }, 
     { 

      "date": "2015-04-01T02:00:00", 
      "Logon": "955.500000", 
      "ServerExport": "1110.000000", 
      "Processor": "6.969313", 
      "AdminLogon": "6978.000000" 
     }, 
     { 

      "date": "2015-04-01T02:10:00", 
      "Logon": "960.500000", 
      "ServerExport": "481.500000", 
      "Processor": "6.288052", 
      "AdminLogon": "1777.000000" 
     }, 
     { 

      "date": "2015-04-01T02:20:00", 
      "Logon": "945.500000", 
      "ServerExport": "552.000000", 
      "Processor": "12.196932", 
      "AdminLogon": "2991.500000" 
     }] 

     //initializing dimensions of the visulisation 
     var vis = d3.select("#visualisation"), 
      WIDTH = 2000, 
      HEIGHT = 1000, 
      MARGINS = { 
       top: 20, 
       right: 20, 
       bottom: 20, 
       left: 50 
     } 

     //Defining time format 
     var timeFormat = d3.time.format('%Y-%m-%dT%H:%M:%S'); 

     //Defining range for x. Defining range and domain for y 
     var x = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right]) 
     var y = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom])//.domain([0, 20]) 


     //Defining domain for x 
     x.domain([timeFormat.parse('2015-04-01T00:00:00'), timeFormat.parse('2015-04-01T02:20:00')]) 
     //x.domain(d3.extent(data, function (d) { return d.metricDate; })); 
     y.domain([0, d3.max(data, function (d) { return d.Processor; })]); 


     //Define x axis 
     var xAxis = d3.svg.axis() 
      .scale(x) 
      .ticks(8) 
      .orient("bottom") 
      .tickFormat(d3.time.format("%Y-%m-%d% %H:%M:%S")); //<== insert the tickFormat function 

     //Define y axis 
     var yAxis = d3.svg.axis() 
      .scale(y) 
      .orient("left"); 

     //Appending the axes to the svg 
     vis.append("svg:g") 
      .attr("class", "axis") 
      .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") 
      .call(xAxis); 

     vis.append("svg:g") 
      .attr("class", "axis") 
      .attr("transform", "translate(" + (MARGINS.left) + ",0)") 
      .call(yAxis); 

     //Define line 
     var lineGen = d3.svg.line() 
      .x(function (d) { 
       return x(d.metricDate); 
      }) 
      .y(function (d) { 
       return y(d.Processor); 
      }); 

     //Appending the line to the svg 
     vis.append('svg:path') 
      .attr('d', lineGen(data)) 
      .attr('stroke', 'green') 
      .attr('stroke-width', 2) 
      .attr('fill', 'none'); 


    </script> 

Answer 1

Вы почти находитесь там, но у вас есть несколько ошибок, вероятно, из-за некоторых операций копирования или вставки или забывания шагов редактирования.

Вот рабочий пример: jsfiddle

Во-первых, свойство, содержащее ваши метки времени называется date на всех, кроме одного из ваших объектов, поэтому я изменил metricDate к date на этом одном объекте, и в вашей lineGen переменной.

Во-вторых, вместо передачи строки d.date до шкалы времени x необходимо пройти timeFormat.parse(d.date).

Наконец, при вычислении максимального значения для шкалы y ваша подпрограмма фактически возвращает "8.683075", строку, начинающуюся с самого высокого символа. Чтобы исправить это, вы можете изменить свой вызов на max, чтобы использовать +d.Processor, который преобразует числовые строки в числа.

Answer 2

во-первых:. Один из объектов в массиве data не имеют date свойство, но metricDate собственность, а затем в йо ур код, который вы используете

var lineGen = d3.svg.line() 
     .x(function (d) { 
      return x(d.metricDate); 
     }) 

Это специально? Мне кажется ошибкой - в jsfiddle ниже я изменил оба этих metricDate экземпляров только date.

После этого все, что потребовалось, чтобы сделать его работу дополнительно разборе строки в TimeFormat в генераторе линии, как это:

//Define line 
    var lineGen = d3.svg.line() 
     .x(function (d) { 
      return x(timeFormat.parse(d.date)); 
     }) 
     .y(function (d) { 
      return y(d.Processor); 
     }); 

Работа jsfiddle: http://jsfiddle.net/68zef399/

P.S. Возможно, вы захотите также уменьшить масштаб диаграммы - в 2000x1000 он довольно большой.