如何从Node.js服务器接收nvd3.js中的数据？
[英]How to receive data in nvd3.js from a node.js server?
问题描述
This may be a very straight forward question, but I am new to d3.js. 
这可能是一个非常简单的问题，但是我对d3.js并不陌生。 node.js and even JavaScript in general. 一般而言，node.js甚至JavaScript。
I want to take data from a table in my MySQL database and plot it as a dynamic line graph (because the table keeps receiving stream data) using a graph from nvd3.js. 我想使用来自nvd3.js的图形从MySQL数据库中的表中获取数据并将其绘制为动态折线图（因为该表不断接收流数据）。
So far I have used node.js to create a server and get the lines from my table, convert them to JSON and print them. 到目前为止，我已经使用node.js创建服务器并从表中获取行，将其转换为JSON并进行打印。 This is what I have: 这就是我所拥有的：
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);
The issue now, is that because I want to plot a graph with nvd3.js using this data, I need to create an html file in which I can declare the libraries regarding nvd3, and plot the graph there. 现在的问题是，因为我想使用此数据通过nvd3.js绘制图形，所以我需要创建一个html文件，在其中可以声明有关nvd3的库，并在那里绘制图形。 So something like this: 所以像这样：
<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();
....
My question is, how can I use the variable result from my node.js server that holds the data I want in my html file? 我的问题是，我该如何使用来自node.js服务器的变量result来保存我想要的html文件中的数据？ Should I be getting the data directly from port 8084? 我应该直接从端口8084获取数据吗？ Do I even need to use html? 我什至需要使用html吗？
Thank you very much. 非常感谢你。
PS: Please DO NOT include solutions that include the use of PHP, as that is not what I am looking for. PS：请不要包括使用PHP的解决方案，因为这不是我想要的。
1 个解决方案
解决方案1
0 2016-04-08 12:13:13
You should use an AJAX request. 您应该使用AJAX请求。 You could use jQuery to help you with that: 您可以使用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");
});
Demo 演示版
The following pie chart uses a JSON document from Stackoverflow's API. 以下饼图使用了Stackoverflow API中的JSON文档。 It shows the amount of questions that have no answers vs the amount of questions that have at least one answer ( https://api.stackexchange.com/2.2/info?site=stackoverflow ) 它显示了没有答案的问题数量与至少有一个答案的问题数量（ 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.