在 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] 内为每个component 创建divs

- 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);

不确定这是否有效。如果不想第二次查询db，可能是因为数据集大或者db慢？

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

不过，这取决于您的用例。