【发布时间】:2016-09-23 09:18:24
【问题描述】:
我用 Node JS、Express JS、Mongoose 和 D3 JS 创建了一个网页。
在网页中,它包含 3 个下拉菜单:部门、员工、周。 网页的用法如下:
- 选择“部门”时,将过滤“员工”菜单以仅显示所选“部门”的菜单。选择“员工”后的“周”也是如此。
- 选择 3 个菜单并单击“绘图”按钮后,将绘制一个折线图(使用 d3.js)以显示该月员工的工作时间。
MongoDB Json
{ dep: '1',
emp: 'Mr A',
week: 1,
hrs: [{
{1,8},
{2,10},
...
}]
}
这是我的代码的 sn-ps:
routes.js
// Connect the required database and collection
var dataAll = require('./models/dataModel');
module.exports = function(app) {
app.get('/api/data', function(req, res) {
dataAll.find({}, {}, function(err, dataRes) {
res.json(dataRes);
});
}
app.get('*', function(req,res) {
res.sendfile('./index.html');
}
}
index.html
... // More codes
<div id="menuSelect1"></div>
<div id="menuSelect2"></div>
<div id="menuSelect3"></div>
...
<script src="./display.js" type='text/javascript'></script>
... // More codes
display.js
//Menu (Department,Employee,Week) Information is gathered here
queue()
.defer(d3.json, "/api/data")
.await(createPlot);
function createPlot(error, plotData) {
var myData = plotData;
var depData = d3.nest()
.key(function(d) {return d.dep;})
.rollup(function(v) {return v.length;})
.entries(myData);
selectField1 = d3.select('#menuSelect1')
.append("select")
.on("change", menu1change)
.selectAll(depData)
.enter()
.append("option")
.attr("value", function(d) {return d.key;})
.text(function(d) {return d.key;});
function menu1Change() {
//Filter Next Menu with the option chosen in this menu
... // More codes
var selectedVal = this.options[this.selectedIndex].value;
var empData = dataSet.filter(function(d) { return d.emp = selectString; });
... // More codes
}
... // More codes
}
问题: 从功能上讲,它按预期工作。问题是当数据库变得越来越大时,页面的加载变得非常缓慢(加载分钟)。我认为这应该是由于检索所有数据的路由(.find({},{})),但我认为我需要它,因为我在“display.js”中使用它来过滤我的菜单选项。
有没有更好的方法来解决性能问题?
【问题讨论】:
标签: html node.js mongodb d3.js