Javascript 使用d3.js、node.js和postgresql显示动态直方图
我使用node.js从postgresql数据库中获取数据，并在浏览器中以数组形式完美地显示了这些数据。我还使用node.js显示了静态直方图（由d3.js代码生成）。直方图还使用静态数组值。数据库值和静态直方图分别显示在我的浏览器页面上。现在我要做的是使这个直方图成为动态的，以便直方图使用数据库值。我不知道如何将数据库值分配给直方图 我尝试使用simple node.js，但不起作用Javascript 使用d3.js、node.js和postgresql显示动态直方图,javascript,node.js,postgresql,express,d3.js,Javascript,Node.js,Postgresql,Express,D3.js,我使用node.js从postgresql数据库中获取数据，并在浏览器中以数组形式完美地显示了这些数据。我还使用node.js显示了静态直方图（由d3.js代码生成）。直方图还使用静态数组值。数据库值和静态直方图分别显示在我的浏览器页面上。现在我要做的是使这个直方图成为动态的，以便直方图使用数据库值。我不知道如何将数据库值分配给直方图 我尝试使用simple node.js，但不起作用 /** * Created by Raees Afridi on 8/17/2015.*/ var htt
/**
* Created by Raees Afridi on 8/17/2015.*/
var http = require('http');
var fs = require('fs');
var pg = require('pg');
var conString = "pg://postgres:raees@localhost:5432/tweetdb";
function onRequest(req, res) {
if(req.method == 'GET' && req.url == '/') {
res.writeHead(200, {"Context-Type": "text/html"});
var client = new pg.Client(conString);
client.connect();
var query = client.query("SELECT t_follower, t_text FROM columbia ORDER BY t_follower desc limit 4");
query.on("row", function (row, result) {
result.addRow(row);
});
query.on("end", function (result) {
var mydata = res.end(JSON.stringify(result.rows, null, " "));
console.log(mydata);
client.end();
});
fs.createReadStream("./index.html").pipe(res);
}
}
http.createServer(onRequest).listen(3000);
console.log("Server is running...")
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<style>
.pumpkin {
fill: yellow;
stroke: orange;
stroke-width: 5;
}
</style>
</head>
<body>
<% include templates/header.ejs%>
<h3><%= title %> Page</h3>
<% root = JSON.parse( tweetdata ); %>
<ul>
<% root.forEach(function(item) { %>
<li><%= item.t_friends %></li>
<% })%>
</ul>
<% var dataset = Array(); var i=0; %>
<% root.forEach(function(item) { %>
<% dataset[i] = parseInt(item.t_friends); %>
<% i+=1; }); %>
<% var dataset = dataset %>
<script type="text/javascript">
// var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
//11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
</script>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 100;
var barPadding = 1;
// var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
// 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
//var dataset = tweetdata;
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
//return i * 21; //Bar width of 20 is already defined and plus 1 for padding
return i * (w / dataset.length);
})
.attr("y", function(d) {
return h - (d * 4);
})
.attr("width", w / dataset.length - barPadding)
//.attr("height", 100);
.attr("height", function(d) {
return d * 4;
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
})
.attr("y", function(d) {
return h - (d * 4) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
</script>
</body>
</html>
.南瓜{
填充物：黄色；
笔画：橙色；
笔画宽度：5；
}
页
//var数据集=[5,10,13,19,21,25,22,18,15,13，
//11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
//宽度和高度
var w=500；
var h=100；
var=1；
//var数据集=[5,10,13,19,21,25,22,18,15,13，
// 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
//var数据集=tweetdata；
//创建SVG元素
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
svg.selectAll（“rect”）
.数据（数据集）
.输入（）
.append（“rect”）
.attr（“x”，函数（d，i）{
//return i*21；//已定义条宽20，加1表示填充
返回i*（带数据集长度）；
})
.attr（“y”，函数（d）{
返回h-（d*4）；
})
.attr（“宽度”，w/dataset.length-条形填充）
//.attr（“高度”，100）；
.attr（“高度”，功能（d）{
返回d*4；
})
.attr（“填充”，功能（d）{
返回“rgb（0，0，+（d*10）+”）；
});
svg.selectAll（“文本”）
.数据（数据集）
.输入（）
.append（“文本”）
.文本（功能（d）{
返回d；
})
.attr（“文本锚定”、“中间”）
.attr（“x”，函数（d，i）{
返回i*（w/dataset.length）+（w/dataset.length-barPadding）/2；
})
.attr（“y”，函数（d）{
返回h-（d*4）+14；
})
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“11px”）
.attr（“填充”、“白色”）；
有什么想法吗？我会创建一个单独的rest服务来检索您的数据，而不是在您的根请求中发送数据 通过这种方式，您可以返回d3可以用于图表的json对象。 （您当前正在返回字符串，我认为这是图表未呈现的主要原因） d3有一个从rest服务获取json的方法，因此您可以使用它来检索数据，并在返回数据后呈现图表 我使用的是您文章中的node.js示例，但您可能希望研究快速路由以处理您的服务：
if(req.method == 'GET' && req.url == '/getchartdata') {
var client = new pg.Client(conString);
client.connect();
var query = client.query("SELECT t_follower, t_text FROM columbia ORDER BY t_follower desc limit 4");
query.on("row", function (row, result) {
result.addRow(row);
});
query.on("end", function (result) {
res.status(200)
res.json(result.rows);
client.end();
});
}
//Width and height
var w = 500;
var h = 100;
var barPadding = 1;
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.json('/getchartdata', function(error, dataset) {
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
//return i * 21;
//Bar width of 20 is already defined and plus 1 for padding
return i * (w / dataset.length);
})
.attr("y", function(d) {
return h - (d * 4);
})
.attr("width", w / dataset.length - barPadding)
//.attr("height", 100);
.attr("height", function(d) {
return d * 4;
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
})
.attr("y", function(d) {
return h - (d * 4) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
});
我将创建一个单独的rest服务来检索您的数据，而不是在根请求中发送数据 通过这种方式，您可以返回d3可以用于图表的json对象。 （您当前正在返回字符串，我认为这是图表未呈现的主要原因） d3有一个从rest服务获取json的方法，因此您可以使用它来检索数据，并在返回数据后呈现图表 我使用的是您文章中的node.js示例，但您可能希望研究快速路由以处理您的服务：
if(req.method == 'GET' && req.url == '/getchartdata') {
var client = new pg.Client(conString);
client.connect();
var query = client.query("SELECT t_follower, t_text FROM columbia ORDER BY t_follower desc limit 4");
query.on("row", function (row, result) {
result.addRow(row);
});
query.on("end", function (result) {
res.status(200)
res.json(result.rows);
client.end();
});
}
//Width and height
var w = 500;
var h = 100;
var barPadding = 1;
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.json('/getchartdata', function(error, dataset) {
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
//return i * 21;
//Bar width of 20 is already defined and plus 1 for padding
return i * (w / dataset.length);
})
.attr("y", function(d) {
return h - (d * 4);
})
.attr("width", w / dataset.length - barPadding)
//.attr("height", 100);
.attr("height", function(d) {
return d * 4;
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
})
.attr("y", function(d) {
return h - (d * 4) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
});
您好，如果您有项目回购协议，您可以发布您的代码或链接吗？我使用的是express framework。我还在simple node.js
Page用代码更新问题，而不是在注释中。它不可读。@Michelem，谢谢，现在好了吗？嗨，你能发布你的代码或链接到你的项目回购吗？如果你有，我正在使用express framework。我还在simple node.jsPage用代码更新问题，而不是在注释中。“看不懂。”米歇勒姆，谢谢，现在好了吗？