【发布时间】：2014-11-17 00:02:04
【问题描述】：
我想知道如何使用通过 Socket.io 从 Node.js 服务器接收到的数据库中的数据来使用 d3 进行数据可视化。
我已经阅读了一些关于为此使用 PHP 和 JSON 的文章。我真的需要 JSON 吗？我怎么能在不需要 PHP 的情况下做到这一点？实际上，从 Socket.io 接收到的数据已经存储在数组values_array 中。但是这个数组不被 d3 接受。
到目前为止，我尝试了一个 getter 函数并尝试重写数组——但没有成功。
任何意见，将不胜感激。
下面是客户端 HTML 代码：
!doctype html>
<html>
<head>
<script src='//code.jquery.com/jquery-1.7.2.min.js'></script>
<script src='//localhost:3000/socket.io/socket.io.js'></script>
<script type="text/javascript" src="d3.v3.min.js"></script>
<script>
window.onload=function(){
var socket = io();
var values_array = new Array();
socket.on('server2browser', function(data) // receive
{
fkt_values_array(data);
});
function fkt_values_array(data)
{
$.each(data, function(i, obj)
{
values_array[i] = obj.numbers;
});
$('#arrayprint_values').text(values_array);
}
setTimeout(function()
{
dynamicData = values_array;
}, Math.random() * 1000);
dynamicData = [22,33,33]; // This works
// dynamicData = values_array; // But I can´t get data from Socket.io into d3
// Data visualisation (d3)
var dataset = dynamicData;
//Width and height
var w = 500;
var h = 200;
var barPadding = 1;
var svg = d3.select("#diagram")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("y", function(d) {
return h - (d * 4); //Höher
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function(d) {
return d * 4;
})
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
.attr("fill", function(d) {
return "rgb(" + (d * 10) + ", 0, " + (d * 10) + ")";
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("x", function(d, i) {
return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
})
.attr("y", function(d) {
return h - (d * 4) + 14; //15 is now 14
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white")
.attr("text-anchor", "middle");
}
</script>
</head>
<body>
<div id='arrayprint_values'> Placeholder Text</div> // Here the array is successfully printed out
<div id="diagram"> Placeholder </div> // Here the diagram is displayed, but only with static data
</body>
</html>
【问题讨论】：
标签： javascript database node.js asynchronous d3.js