在 Meteor 中使 dc.js 图表具有反应性答案

【问题标题】：Making dc.js charts reactive in Meteor在 Meteor 中使 dc.js 图表具有反应性
【发布时间】：2015-07-16 16:20:46
【问题描述】：

我正在使用dc.js 和crossfilter 在Meteor 中创建一些图表。一切都准备好了，我已经准备好了所有图表，但是有一个关于使图表反应的问题。我 subscribe 在 JavaScript 文件中客户端从 mongoDB 收集的数量；在这里，每次集合中的数据发生变化时，我都必须更新传递给交叉过滤器的数据。

假设，对于应用程序上的每个页面，我订阅了 8 个不同的集合，每个集合都有大约 30 个数据字段/列。每个字段中的这些数据每 30 秒左右不断变化或更新。现在的问题是，随着数据的变化，页面中的图表必须使用新数据进行更新并重新渲染所有图表。

我了解到 Meteor 中有几个方法可以让页面像 deps.autorun( ) 和 tracker.autorun( ) 一样具有响应性。问题是，我应该在上述函数中添加什么代码来使我的图表具有响应性？

PS：如果您需要任何澄清，请回复评论，问题已经很长了。

【问题讨论】：

你不应该在向 Crossfilter 添加数据时调用 dc.redrawAll() 吗？
对，dc.redrawAll( ) 可能会起作用。但问题是我没有手动将数据添加到集合中。只要数据有任何微小的变化，图表就必须自动更新。像某些值 total : 100 更改为 total : 200。请注意，只有值会发生变化，但不会向集合中添加额外的行。
您不能在 Crossfilter 中更改内部数据，对吗？
是的，所以您最好的选择是删除旧记录并添加一个新的更新的记录，或者只是推送一个增量（只要您只是进行求和和算）。无论哪种方式，当您的数据发生变化时，您都必须使用 crossfilter.add()，并且在您这样做之后，您需要调用 dc.redrawAll()。

标签： meteor charts dc.js crossfilter

【解决方案1】：

假设您有一个“dcChart”模板，并且您从主页中调用该模板为

{{> dcChart data=dcChartData}}

数据助手：

'dcChartData': function () {
    var data = SomeCollection.find(...);
    return data;
}

您的代码应如下所示：

Template.dcChart.rendered = function () {
  var template = this;
  buildChart(template.data);

  template.autorun(function () {
     var templateData = Template.currentData();
     buildChart(templateData);
  });
}

在自动运行部分，您通过传递反应数据（来自集合的记录）重新呈现图表。因此，每次更新集合时，图表都会再次呈现）。

【讨论】：

感谢您的回答...实际上，我在一个页面上有大约 15-20 个图表，所有这些图表都是使用单个模板呈现的。然后关于你提到的自动运行部分，我有将近 10 个集合数据传递给 10 个不同的交叉过滤器。每个集合大约有 30 个数据字段，每个字段每 30 秒更改一次。这就是复杂性。