带有ISO 8601格式的JSON数据的D3线图

我试图绘制JSON数据。我对js和d3很陌生。我可以在x轴上格式化ISO 8601日期，但是我无法显示该行。 y轴和x轴显示得很好。我不断收到一个错误，内容为：“错误：属性d的值无效=”MNaN，-708.1292215027511LNaN“ 我认为这个问题与绑定我的数据点到轴有关。日期在X轴和处理器为我的Y轴带有ISO 8601格式的JSON数据的D3线图

请让我知道，如果你有任何建议，这将有助于我的路线（“路径”）出现任何关于如何处理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>

来源

2015-04-28 CrashleyS

你几乎在那里，但只是有一些错误可能是由于一些复制/粘贴或忘记编辑步骤。

这里有一个工作示例：jsfiddle

首先，包含你的时间戳的属性被称为date所有，但你的对象之一，所以我改变metricDate到date一个对象，并在您lineGen变量。

其次，不要将字符串d.date传递到时间尺度x，而需要传递timeFormat.parse(d.date)。

最后，当您计算y比例尺的最大值时，您的例程实际上会返回"8.683075"，即以最高字符开始的字符串。要解决这个问题，您可以将您的电话更改为max以使用+d.Processor，它将数字字符串转换为数字。

来源

2015-04-28 20:48:13 Michael

首先：一。在您的data阵列的对象不具有date财产，但metricDate财产，后来在哟你使用的代码

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

这是故意的吗？这对我来说似乎是一个错误 - 在下面的jsfiddle中，我将这两个metricDate实例更改为date。

这毕竟花了使其工作还解析字符串到行产生一个时间格式，如：

//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/

附：您可能还需要缩小图表大小 - 在2000x1000的情况下，它非常庞大。

来源

2015-04-28 20:44:15 vtosh

非常感谢你！真的很感谢你的回答。 – CrashleyS

带有ISO 8601格式的JSON数据的D3线图

回答

相关问题