在expressjs和JADE环境中可视化数据

我正在试图用d3来显示一些数据，这些数据存储在MongoDB中。 我的问题是关于通过JADE模板为每个数据创builddiv元素的最佳实践，然后调用绘制不同图表的方法。
我的主要问题是，我显示HTML文件后失去了我的数据的引用，我不想再次查询数据库。

架构

 # Create Schema executionSchema = new Schema( timestamp: Number, components: [{ uid: String, type: { type: String }, samples: [Number], execution_times: [Number] }] ) 

数据最初被检索并提供给JADE模板：

索引咖啡

 exports.index = (req, res) -> Execution.find (err, executions, count) -> res.render "index", title: "Debugger", executions: executions return return 

之后，index.JADE为执行中的每个component创builddivs [0]

 - each component in executions[0].components div(class="panel panel-primary") div(class="panel-heading") UID: #{component.uid} div(class="panel-body") p(style='white-space:pre;') | Type: #{component.type} - var uid = component.uid div(id=uid) 

这就是一切，因为我无法在JADE文件之外调用JavaScript方法。 有任何想法吗？
谢谢。

Answer 1

如果我理解正确，你希望这个数据在客户端脚本上可用，而不需要第二次实际查询数据库？

你有两个select。 第一个是在你目前的Jade代码的右下方添加这行代码：

 - each component in executions[0].components // div creation stuff here // ... script window.executions = JSON.stringify(executions); 

现在，您的客户端脚本将能够访问执行对象并像这样访问数据：

 var data = JSON.parse(executions); 

不知道这是否是有效的。 如果你不想第二次查询数据库，可能是因为数据集很大或数据库速度慢？

那么只有一个单一的数据库查询这样做的另一种方法是呈现没有div的页面，并且根本不查询数据库。 然后使用Javascript获取执行（ajax调用），并在数据加载后呈现给客户端。

这取决于你的用例。