Javascript 如何从node.js服务器接收nvd3.js中的数据？_Javascript_Mysql_Node.js_D3.js

Javascript 如何从node.js服务器接收nvd3.js中的数据？

javascript mysql node.js d3.js

Javascript 如何从node.js服务器接收nvd3.js中的数据？,javascript,mysql,node.js,d3.js,Javascript,Mysql,Node.js,D3.js,这可能是一个非常直截了当的问题，但我对d3.js还不熟悉。js甚至JavaScript 我想从MySQL数据库中的一个表中获取数据，并使用nvd3.js中的一个图将其绘制为动态折线图（因为该表一直在接收流数据）到目前为止，我已经使用node.js创建了一个服务器，从表中获取行，将它们转换为JSON并打印出来。这就是我所拥有的： var mysql= require('mysql'); var http = require('http'); var d3 = require("d3"); var

这可能是一个非常直截了当的问题，但我对d3.js还不熟悉。js甚至JavaScript

我想从MySQL数据库中的一个表中获取数据，并使用nvd3.js中的一个图将其绘制为动态折线图（因为该表一直在接收流数据）

到目前为止，我已经使用node.js创建了一个服务器，从表中获取行，将它们转换为JSON并打印出来。这就是我所拥有的：

var mysql= require('mysql');
var http = require('http');
var d3 = require("d3");
var connection = mysql.createConnection({
  host     : '****',
  user     : '****',
  password : '****',
 database: '****'
});


connection.connect() ;


http.createServer(function (request, response)
{

        connection.query('SELECT * FROM table', function(err, result)
        {

                response.writeHead(200, { 'Content-Type': 'application/json'});
                response.end(JSON.stringify(result));

                response.end();
        });

}).listen(8084);

现在的问题是，因为我想使用这些数据绘制一个带有nvd3.js的图形，所以我需要创建一个html文件，在其中我可以声明关于nvd3的库，并在那里绘制图形。比如说：

<html>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js'>  </script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js'></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css' rel='stylesheet'>

<div id='chart' style='height:500px'>
  <svg></svg>
  <script>
  nv.addGraph(function() {
    var chart = nv.models.lineWithFocusChart();
    ....


nv.addGraph（函数（）{
var图表=nv.models.lineWithFocusChart（）；
....

我的问题是，如何使用node.js服务器中的变量

result

，该变量保存html文件中所需的数据？我应该直接从端口8084获取数据吗？我甚至需要使用html吗

多谢各位

PS：请不要包括使用PHP的解决方案，因为这不是我想要的。

您应该使用AJAX请求。您可以使用jQuery来帮助您：

var url = "localhost:8084" // Change this accordingly

$.getJSON(url, function(data) {
    // Create your chart here, for now just log it:
    console.log(data);
}).fail(function() {
    // Something went wrong:
    console.log("Error");
});

演示下面的饼图使用了Stackoverflow API的JSON文档。它显示了没有答案的问题数量与至少有一个答案的问题数量（）

var chartElement=d3.选择（“图表svg”）；
var图；
nv.addGraph（函数（）{
chart=nv.models.pieChart（）
.x（功能（d）{
返回d.标签
})
.y（功能（d）{
返回d值
})
.showLabels（正确）
.noData（“正在等待服务器…”）；
图表元素
.基准（[]）
.电话（图表）；
收益表；
}，函数（）{
$.getJSON（“https://api.stackexchange.com/2.2/info?site=stackoverflow，函数（数据）{
var totalQuestions=data.items[0]。问题总数；
var totalUnanswered=数据。项[0]。总计未回答；
var totalAnswered=totalQuestions-totalUnanswered；
var图表数据=[{
标签：“关于SO的未回答问题”，
值：totalUnanswered
}, {
标签：“回答了关于SO的问题”，
值：TotalResponsed
}];
chartElement.基准面（chartData）；
chart.update（）；
}).fail（函数（）{
noData（“出了问题：（”）；
chart.update（）；
});
})；

#图表{
高度：500px；
}