如何使用D3.js可视化从我的应用程序的GET请求返回的JSON

时间:2014-02-07 03:26:25

标签: javascript express d3.js handlebars.js nvd3.js

我正在构建一个Express.js应用程序,以便与third-party API进行通信,并可视化返回的JSON部分。

其中一条相关路线是:

req = require 'request'
...

app.get '/activity', (request, response) ->
  options =
      url: baseurl + '/activities/111008284'
      headers: {'Authorization': 'Bearer ac0bd2c2b020c232ebe2c560'}

  req options, (error, res, body) ->
    if !error and res.statusCode == 200
      data = JSON.parse body
      response.render 'activity', data

此处data是我想要的JSON数据。在我的activity.hbs我可以与JSON交互,例如,创建一个没有任何问题的表。

<table class="overview">
      <thead>
      <th>Name</th>
      <th>Distance (Meters)</th>
      <th>Elapsed Time (Seconds)</th>
      <th>Calories</th>
      </thead>
      <tbody>
      <td>{{name}}</td>
      <td>{{distance}}</td>
      <td>{{elapsed_time}}</td>
      <td>{{calories}}</td>
      </tbody>
  </table>

如何让D3读入相同的activity JSON对象?我必须使用D3.xhr吗?

<script>
d3.xhr("localhost:3333/activity", function (error, data) {
d3. #logic to interact with JSON
nv.addGraph()

</script>

还是有更简单的方法吗?

1 个答案:

答案 0 :(得分:0)

一旦将数据解析为Javascript对象,就不需要任何特殊函数来读取它 - 只需直接使用数据对象,就像使用d3创建数据对象一样功能。获取您在d3.json(filename, callbackFunction)中使用的回调函数代码,然后从其他GET例程中调用它,并将您创建的数据对象传递给data = JSON.parse(body)