我构建了一个 Node.js 应用程序，它从互联网上抓取一些信息并将这些信息保存在 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;
}
数据.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 文件来存储我的数据，但我想使用数据库。 我该怎么做？
最佳答案
我的解决方案要求您安装两个额外的模块:
npm install -save express-handlebars 和 npm install -save pg-promise
之后，在 app.js 中，您可以连接到您的 postgresql 服务器并通过 handlebar 助手解析数据，这里是所有代码。
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(/"/g,'"').replace(/</,''))
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 方面的专家，如果您担心的话，这样做可能存在一些严重的安全漏洞，我建议您通过 express.js api并通过一种正确的方法直接从 app.js 获取 json 对象，而无需我在此解决方案中进行的所有 hacky 字符串替换。
编辑:
将字符串替换减少到一行代码:
var init = JSON.parse("{{sqlData}}".replace(/"/g,'"').replace(/</,''))
关于node.js - 使用 Express 创建数据可视化并从 PostgreSQL 数据库获取数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49792305/