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

Question

我正在尝试使用存储在 MongoDB 内部的 d3 可视化一些数据。我的问题是关于通过 JADE 模板为每个数据创建 div 元素的最佳实践，然后调用一个方法来绘制不同的图表。
我的主要问题是，在显示 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 为执行[0]内部的每个组件创建div

- 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

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

这里有两个选择。第一个是在当前的 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 调用)并在加载数据后将其呈现在客户端。

但这取决于您的用例。