D3.js表在数据改变时不刷新
D3.js table not refreshing when data changes
我使用d3在浏览器中显示一个表。json函数。当json文件中的数据发生变化时，浏览器中的表不会刷新。它在表中显示以前的数据，而不是新数据。如果我在浏览器中手动刷新，那么它就会正常工作，表会随着新数据而变化。
下面是我使用的代码:<!DOCTYPE html>
<meta charset="utf-8">
<style>
td{
padding:7px; border:#4e95f4 1px solid;
}
/* provide some minimal visual accomodation for IE8 and below */
th{
background: #dae5f4;
border: 1px solid black;
padding: 2px 4px;
font-weight: bold;
}
/* Define the background color for all the ODD background rows */
tr:nth-child(odd){
background: #b8d1f3;
}
/* Define the background color for all the EVEN background rows */
tr:nth-child(even){
background: #dae5f4;
}
a
{
position: absolute;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<div id="container"></div>
<a href="http://192.168.7.102:3000/data/traffic" download="">Download</a>
<script>
var jsonURL = "http://192.168.7.102:3000/data/traffic";
d3.json(jsonURL, function(data) {
// the columns you'd like to display
var columns = ["Clients", "Traffic", "Rank"];
var table = d3.select("#container").append("table")
.style("margin-top", "50px")
.style("margin-left","280px")
.style("border-collapse", "collapse") // <= Add this line in.
.style("border", "2px black solid")
.style("width", "50%"),
thead = table.append("thead"),
tbody = table.append("tbody");
// append the header row
thead.append("tr")
.selectAll("th")
.data(columns)
.enter()
.append("th")
.text(function(column) { return column; });
// create a row for each object in the data
var rows = tbody.selectAll("tr")
.data(data)
.enter()
.append("tr");
// create a cell in each row for each column
var cells = rows.selectAll("td")
.data(function(row) {
return columns.map(function(column) {
return {column: column, value: row[column]};
});
})
.enter()
.append("td")
.text(function(d) { return d.value; });
});
</script>
json文件中的数据发生变化时，图形不刷新。有人知道问题出在哪里吗?
我创建了node.js应用程序和restful web服务，根据用户需求从数据库中获取数据，并将数据写入"流量"。json文件。当用户在应用程序上选择特定的图表时，我们将该html文件发送到浏览器。在HTML d3。Json函数正在触发。
Here is the code I use:
=======================
var express = require('express'),
http = require('http'),
querystring = require('querystring'),
router = express.Router(),
fs = require('fs'),
MongoClient = require('mongodb').MongoClient,
format = require('util').format,
mongo = require('mongodb'),
monk = require('monk'),
json2csv = require('json2csv'),
Reloader = require('reload-json'),
reload = new Reloader();
var Start_Date ;
var End_Date ;
var Client_Ip;
var Clientip;
var ChooseData;
var Charts;
var Chart1;
var Choosedata1;
//Getting the data from calsoftlabs page
router.post('/myaction', function(req, res, next) {
Start_Date = req.body.StartDate +'T'+ req.body.StartTime ;
End_Date = req.body.EndDate +'T'+ req.body.EndTime;
Client_Ip = req.body.ClientIP;
Clientip = req.body.ClientIPS;
ChooseData = req.body.ChooseData;
Charts = req.body.Charts;
Chart1 = req.body.Chart;
Choosedata = req.body.Data;
//converting date and time to timestamp.
function evaldate(input){
var date = new Date(input);
return date.getTime();
}
var Start_timestamp = evaldate(Start_Date),
End_timestamp = evaldate(End_Date);
var dbdata,
start_time,
end_time,
client_ip,
choosedata,
options,
data,
req;
//sending parameters to restfull webapp service
if(Choosedata == "upload" || Choosedata == "download") {
data = querystring.stringify({
start_time: Start_timestamp,
end_time: End_timestamp,
client_ip: Clientip,
});
} else if(ChooseData == "upload_traffic" || ChooseData == "download_traffic" || ChooseData == "both" ) {
data = querystring.stringify({
client_ip: Client_Ip,
});
}
console.log(data);
if(ChooseData == "upload_traffic") {
options = {
host: 'localhost',
port:8080,
path:'/restful/traffic/upload_traffic',
method:'POST',
headers: {
'Content-Type': 'application/json',
}
};
} else if(ChooseData == "download_traffic") {
options = {
host: 'localhost',
port:8080,
path:'/restful/traffic/download_traffic',
method:'POST',
headers: {
'Content-Type': 'application/json',
}
};
} else if(Choosedata == "upload") {
options = {
host: 'localhost',
port:8080,
path:'/restful/traffic/upload',
method:'POST',
headers: {
'Content-Type': 'application/json',
}
};
}else if(Choosedata == "download"){
options = {
host: 'localhost',
port:8080,
path:'/restful/traffic/download',
method:'POST',
headers: {
'Content-Type': 'application/json',
}
};
} else if(ChooseData == "both") {
options = {
host: 'localhost',
port:8080,
path:'/restful/traffic/both',
method:'POST',
headers: {
'Content-Type': 'application/json',
}
};
}
//creating file, writing network data to a file.
var fileName = 'views/traffic.json';
req = http.request(options, function(response) {
var jsonString = '';
response.on('data', function(data) {
jsonString += data;
});
response.on('end',function(){
console.log(jsonString);
fs.writeFile(fileName, jsonString,'utf-8');
});
});
if(Chart1 == 'Line') {
res.sendfile('views/Line.html');
} else if(Chart1 == 'Bar') {
res.sendfile('views/Newbar.html');
} else if(Chart1 == 'Area') {
res.sendfile('views/Area.html');
} else if(Chart1 == 'Pie') {
res.sendfile('views/Pie.html');
} else if(Chart1 == 'Multiline') {
res.sendfile('views/Multiline.html');
} else if(Chart1 == 'All') {
res.sendfile('views/Newall.html');
} else if(Charts == 'Table') {
res.sendfile('views/Table.html');
} else if(Charts == 'StackedBar') {
res.sendfile('views/StackedBar.html')
}
req.write(data);
req.end();
req.on('error', function(e) {
console.error(e);
});
});
module.exports = router;
您的表没有刷新，因为您的d3.json(jsonURL, function(data) {...})没有侦听对数据文件的更改。这个函数将运行一次，就这样。
假设您每隔一段时间重新运行数据函数d3.json(jsonURL, function(data) {...})，那么下一个问题将是您永远不会更新您的表，而只是附加一个新表:
var table = d3.select("#container").append("table")
您没有选择您的表(可能已经存在)，而只是向DOM添加一个新表。您需要了解d3中的数据绑定原理。
相关文章：
- 在pushstate改变浏览器url之后刷新页面;它告诉我页面没有;不存在
- 如何刷新D3树，即使数据没有改变
- 当根作用域属性改变时刷新指令
- 改变Javascript变量而不刷新
- jQuery改变img src的html图像不刷新
- 当模型在jQuery事件中发生改变时，Angular 2不会刷新视图
- AngularJS在模型因事件而改变后不刷新视图
- D3.js表在数据改变时不刷新
- 当模型改变时，不能得到局部刷新
- 当文本改变时，刷新图像
- 是否有可能在javascript中创建一个在刷新页面时不会改变的变量?
- $scope在值改变后不刷新
- 如何自动刷新网站和更新我时，它的页面源改变
- 如何在页面刷新时改变URL
- 如果内容改变，自动刷新JS数组
- 使用setTimout根据用户改变刷新计时器的问题's的焦点
- 当ui-sref改变时，href不会刷新
- 我如何使对话框聊天日志滚动到底部不断刷新而不改变鼠标焦点
- 如何使一个javascript变量，改变后保持相同的刷新使用localStorage完整的例子
- 输入范围在改变最大值后不刷新
