使用d3绘制json数据in phant使用d3 js

我试图使用d3.js将存储在sparkfun cloud（IOT云）中的数据可视化。 There is example using google chart for visualizing sparkfun cloud，使用下面的脚本：使用d3绘制json数据in phant使用d3 js

<!DOCTYPE html> 
<html> 
    <head> 
    <!-- EXTERNAL LIBS--> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="https://www.google.com/jsapi"></script> 

    <!-- EXAMPLE SCRIPT --> 
    <script> 

     // onload callback 
     function drawChart() { 

     var public_key = 'dZ4EVmE8yGCRGx5XRX1W'; 

     // JSONP request 
     var jsonData = $.ajax({ 
      url: 'https://data.sparkfun.com/output/' + public_key + '.json', 
      data: {page: 1}, 
      dataType: 'jsonp', 
     }).done(function (results) { 

      var data = new google.visualization.DataTable(); 

      data.addColumn('datetime', 'Time'); 
      data.addColumn('number', 'Temp'); 
      data.addColumn('number', 'Wind Speed MPH'); 

      $.each(results, function (i, row) { 
      data.addRow([ 
       (new Date(row.timestamp)), 
       parseFloat(row.tempf), 
       parseFloat(row.windspeedmph) 
      ]); 
      }); 

      var chart = new google.visualization.LineChart($('#chart').get(0)); 

      chart.draw(data, { 
      title: 'Wimp Weather Station' 
      }); 

     }); 

     } 

     // load chart lib 
     google.load('visualization', '1', { 
     packages: ['corechart'] 
     }); 

     // call drawChart once google charts is loaded 
     google.setOnLoadCallback(drawChart); 

    </script> 

    </head> 
    <body> 
    <div id="chart" style="width: 100%;"></div> 
    </body> 
</html>

我希望用d3.js绘制数据，而不是使用谷歌的图表，因为它提供了更多的灵活性（我很惊讶需要采取多大的努力重新大小图表使用谷歌图表）。要做到这一点，可能需要使用d3.js JSON提取获得来自website.I数据曾试图根据问题1，2如下：

var data1; 
var url = "https://data.sparkfun.com/output/dZ4EVmE8yGCRGx5XRX1W.json" 

d3.json(url, function (json) { 
     if (error) return console.warn(error); 
    //data1 = json; 
    data1=json; 
    consol.log(data1) 
      //code here 
        })

没有奏效。我可能缺少一些关键信息，因为我是d3.js和java的新手。请给我一个方向，以便我可以跟随。谢谢！

来源

2017-01-23 Chenming Zhang

哪里是'在你的回调函数定义error'？我会删除它，然后再试一次:-) – FriendFX

既然你试图赶上error，你必须通过误差在匿名函数的第一个参数：这个

d3.json(url, function (error, json) { 
    //first argument -----^ 
    if (error) return console.warn(error); 
    data1=json; 
    consol.log(data1) 
    //code here 
})

注意的是：在d3.json，“错误”是第一个的说法，不是第二个。

一种更简便的方法是简单地去掉了“错误”：

d3.json(url, function (json) { 
    data1=json; 
    consol.log(data1) 
    //code here 
})

来源

2017-01-23 06:48:04

使用d3绘制json数据in phant使用d3 js

回答

相关问题