如何从mongodb获取数据并使用nodejs显示为d3图表

时间:2015-10-05 10:58:07

标签: javascript node.js mongodb express d3.js

我正在使用此repo

此repo提供了来自fixture_data.json文件中内部数据的图表。

现在我想显示使用mongodb的数据。

然后我做了一些改变

app.js

var express = require('express');
var app = express();
var MongoClient = require('mongodb').MongoClient,
    mongodb = require('mongodb'),
    Server = require('mongodb').Server;

app.engine('.html', require('ejs').__express);
app.set('views', __dirname);
app.set('view engine', 'html');

var mongoclient = new MongoClient(new Server("localhost", 27017));
var db = mongoclient.db('mydb');

var fixtureData = require('./fixture_data.json');
app.locals.barChartHelper = require('./bar_chart_helper');


app.get('/', function(req, res) {

  res.render('index', { fixtureData: fixtureData });
});

app.get('/hello', function(req, res) {
    db.collection('things').find({},{'Created':1, 'Total Price':1}).toArray(function(err, doc){

      res.render('hello', { 'docs': docs});
    })

});


app.listen(3000);
console.log('listening on port 3000');

这是我的 hello.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>D3 Server-side Demo</title>

    <style>
      body {
        background-color: #f5f5f5;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 12px;
      }

      .svg-chart .background {
        shape-rendering: crispEdges;
        stroke: #ccc;
        fill: #fdfdfd;
        stroke-width: 1px;
      }

      .svg-chart .bar { fill: #4682B4; }
    </style>

  </head>
  <body>
    <h1>D3 Server-side Demo</h1>
   <%-
      barChartHelper.getBarChart({
        data: docs,
        width: 400,
        height: 300,
        xAxisLabel: '2012',
        yAxisLabel: 'Views',
        containerId: 'bar-chart-small'
      })
    %>
    <hr>
    <%-
      barChartHelper.getBarChart({
        data: docs,
        width: 800,
        height: 600,
        xAxisLabel: '2012',
        yAxisLabel: 'Views',
        containerId: 'bar-chart-large'
      })
    %> 
  </body>
</html>
问题是:

当我尝试访问http://localhost:3000/hello时,页面会不断加载。

1 个答案:

答案 0 :(得分:1)

您需要正确初始化(调用db.open on等)您的Mongo数据库连接。

文档: https://mongodb.github.io/node-mongodb-native/api-generated/db.html