Question

我构建了一个Node.js应用程序，它可以从Internet上删除一些信息并将这些信息保存在postgreSQL数据库中。现在我想使用D3.js创建一些可视化。通常我使用.csv文件创建可视化，但现在我想从我的数据库中获取数据。

我认为使用Express.js。这是我的代码，它可以工作但它需要来自.csv文件的数据，而不是来自db。

app.js ：

const express = require('express');
var app = express();

const start = async function() {
    console.log('\n(1) Connect to db');
    await postgreSQLlib.connect();

    console.log('\n(02) Create tables if they do not exist');
    await postgreSQLlib.createTables();

    console.log('\n(03) Check if table \'example\' is updated or not');
    if(!await utilFunc.isTableUpdated('example', 6308)) {
        console.log('\n  (04) Download data for coverages');
        await downloader.download();

        console.log('\n  (05) Elaborate data for example before to save on DB');
        await elaborate.elaborate();

        console.log('\n  (06) Saving data on db');
        await saveOnDb.save();
    }   

    console.log('\n(10) D3js visualizations');
    app.set('port', process.env.PORT || 300)
    var server = app.listen(app.get('port'), function() {
        console.log('Listening on PORT: ' + app.get('port'));
    });
    app.use('/',express.static('public/donut')) 

    // I can't disconnect from db if I have to show visualizations, am I right?
    console.log('\n(11) Disconnect');
    await postgreSQLlib.disconnect();
}

start()
.then(function(res) {
    console.log('Done');
})
.catch(function(err) {
    console.log(err);
});

的index.html ：

<!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="utf-8">
       <title>Donut</title>
       <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
       <link rel="stylesheet" type="text/css" href="./donut.css" media="screen"/>
    </head>
    <body>
       <script src="./donut.js"></script>
    </body>
</html>

donut.js ：

var width = 960,
    height = 500,
    radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var arc = d3.svg.arc()
    .outerRadius(radius - 10)
    .innerRadius(radius - 70);

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.population; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

d3.csv("./data.csv", type, function(error, data) {
  if (error) throw error;

  var g = svg.selectAll(".arc")
      .data(pie(data))
    .enter().append("g")
      .attr("class", "arc");

  g.append("path")
      .attr("d", arc)
      .style("fill", function(d) { return color(d.data.age); });

  g.append("text")
      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
      .attr("dy", ".35em")
      .text(function(d) { return d.data.age; });
});

function type(d) {
  d.population = +d.population;
  return d;
}

data.csv ：

age,population
<5,2704659
5-13,4499890
14-17,2159981
18-24,3853788
25-44,14106543
45-64,8819342
≥65,612463

我也试着：

const start = async function() {
    //...

    function onRequest(req, res) {
        if(req.method == 'GET' && req.url == '/') {
            var client = new pg.Client(conString);
            client.connect();
            var query = client.query('SELECT * FROM example;');
            query.on('row', function(row, result) {
                result.addRow(row);
            });
            query.on('end', function(result) {
                res.status(200)
                res.json(result.rows);
                client.end();
            });
        }
    }
}

和

d3.csv("/", type, function(error, data) {
  if(error) { 
    throw error;
  }
  console.log('data:', data);
  ...
}

但它没有用。

我不会使用.csv文件来存储我的数据，但我想使用db。我怎么能这样做？

Answer 1

我的解决方案要求您安装另外两个模块：

npm install -save express-handlebars＆amp; npm install -save pg-promise

之后在app.js中，您可以连接到postgresql服务器并通过车把助手解析数据，这里有所有代码。

<强> app.js

const express = require('express');
const exphbs  = require('express-handlebars');
const pgp     = require('pg-promise')(/*options*/);

var app = express();

dbLoad();

function dbLoad() {

  var connect = {
    host: 'localhost',
    port: 5432,
    database: 'postgres',
    user: 'postgres',
    password: 'YourPassword'
  };

  var db = pgp(connect); 

  db.query({
    text: 'SELECT * FROM table1',
    values: [],
    rowMode: 'array'
  })
  .then(data => {
    var arr = [];
    data.forEach(function(d) {
      var i = 0
      arr.push({
        age: d[i], 
        population: d[i + 1]
      })
      i++
    })

    pageLoad(arr); // Function call to load the page

  })
  .catch(reason => {
    console.log(reason)
  });

}

function pageLoad(data) {

  var hbs = exphbs.create({
    helpers: {
      sqlData: function () { return JSON.stringify(data); }
    }
  });

  app.engine('handlebars', hbs.engine);
  app.set('view engine', 'handlebars');

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

      showTitle: true,
    });
  });

  app.listen(3000);

}

这假设您的服务器上的数据名为table1，其数据结构与csv完全相同。

然后，您应该在与app.js相同的文件夹中创建一个名为 views 的文件夹，并创建一个名为home.handlebars的文件（这是index.html的替代）

在此文件中，您希望像{{sqlData}}一样调用您的数据并解析它。

<强> home.handlebars

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
<title></title>
</head>
<body>

<div id="chart"></div>

</body>

<script>

var init = JSON.parse("{{sqlData}}".replace(/&quot;/g,'"').replace(/&lt;/,''))

chart(init);

function chart(data) {

  var width = 960,
      height = 500,
      radius = Math.min(width, height) / 2;

  var color = d3.scale.ordinal()
      .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

  var arc = d3.svg.arc()
      .outerRadius(radius - 10)
      .innerRadius(radius - 70);

  var pie = d3.layout.pie()
      .sort(null)
      .value(function(d) { return d.population; });

  var svg = d3.select("#chart").append("svg")
      .attr("width", width)
      .attr("height", height)
    .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var g = svg.selectAll(".arc")
        .data(pie(data))
      .enter().append("g")
        .attr("class", "arc");

    g.append("path")
        .attr("d", arc)
        .style("fill", function(d) { return color(d.data.age); });

    g.append("text")
        .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
        .attr("dy", ".35em")
        .text(function(d) { return d.data.age; });

}

</script>
</html>

那应该是它。

注意我不是node.js的专家，如果您对此感到担忧，可能会出现一些严重的安全漏洞，我会这样做，我＆＃39; d建议通过express.js api并通过一种正确的方式直接从app.js获取json对象，而不用我在此解决方案中所做的所有hacky字符串替换。

修改

将字符串替换减少为单行代码：

var init = JSON.parse("{{sqlData}}".replace(/"/g,'"').replace(/</,''))

Answer 2

将d3代码包装到一个函数中，只要你通过express.js调用donut（json）

获取数据作为json 就会调用它

<强> donut.js ：

function donut(json) {
  ...
  var g = svg.selectAll(".arc")
      .data(pie(json))
    .enter().append("g")
      .attr("class", "arc");

...
}

或使用d3.json从服务器获取json并传入URL，如

...
d3.json(data_url, type, function(error, data) {
  if (error) throw error;

  var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .attr("class", "arc");
...

使用Express创建数据可视化并从PostgreSQL数据库获取数据

2 个答案: