这可能是一个非常直接的问题，但我是 d3.js 的新手。 Node.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();
....
我的问题是，如何使用 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 文档。它显示没有答案的问题数量与至少有一个答案的问题数量 ( https://api.stackexchange.com/2.2/info?site=stackoverflow )
var chartElement = d3.select("#chart svg");
var chart;
nv.addGraph(function() {
chart = nv.models.pieChart()
.x(function(d) {
return d.label
})
.y(function(d) {
return d.value
})
.showLabels(true)
.noData("Waiting for server...");
chartElement
.datum([])
.call(chart);
return chart;
}, function() {
$.getJSON("https://api.stackexchange.com/2.2/info?site=stackoverflow", function(data) {
var totalQuestions = data.items[0].total_questions;
var totalUnanswered = data.items[0].total_unanswered;
var totalAnswered = totalQuestions - totalUnanswered;
var chartData = [{
label: "Unanswered questions on SO",
value: totalUnanswered
}, {
label: "Answered questions on SO",
value: totalAnswered
}];
chartElement.datum(chartData);
chart.update();
}).fail(function() {
chart.noData("Something went wrong :(");
chart.update();
});
});#chart {
height: 500px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.css" rel="stylesheet" />
<div id="chart">
<svg></svg>
</div>关于javascript - 如何从 Node.js 服务器接收 nvd3.js 中的数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36471772/