javascript - Meteor 中的模板级 react 性

Question

我正在解决一个问题，我想在仪表板中将数据显示为图表(通过 perak:c3 )和表格(通过 aslagle:reactive-table )。我的问题是数据是从 MongoDB 中的集合中提取的，它的格式可以立即通过 c3 进行绘图，但需要转换为本地集合以供 react 表包使用，如 this answer 中所建议的那样上一个问题。

当我更改要显示的数据集时，我希望更新图表和表格。这需要更改本地集合中的值，但是，这会减慢速度，因此不是平滑地重绘图表，而是在页面上卡住，然后显示新数据。

我创建了一个示例项目 on GitHub here所以这个问题很容易被复制。如果您运行该应用程序并在浏览器中选择一个数据集，您将明白我的意思

要查看我想在图表中保留的 react 行为，请转到 client/templates/dashboard/dashboard.html 并简单地注释掉表格模板 {{> dashboardTable}}

现在更改数据集以查看图表如何平滑地重新绘制。本质上，我试图确保模板 dashboardChart 和 dashboardTable 彼此独立呈现。

---

更新

遵循迈克尔·弗洛伊德关于使用超时的建议有一点帮助

Meteor.setTimeout(function(){createLocalCollection(data)},200);

虽然图表绘制顺利，但当表格完成填充时，图表会再次绘制。看起来它跳转到了一些我无法理解的中间状态。 Here is a video表明我的意思。

Answer 1

我将其添加为单独的答案，因为这是一种完全不同的方法。

在 d3 中使用 onRendered 回调来调用本地集合更新。

你在哪里:

chart = c3.generate({
  bindto: '#dataset-chart',

在 dashboard_chart.js 中，添加:

chart = c3.generate({
  onrendered: createLocalCollection(),
  bindto: '#dataset-chart',

当然，您需要从事件处理程序中删除 createLocalCollection(data)。

为了避免必须通过 d3 中的 onrendered 处理程序传递数据上下文，还要更新您的 createLocalCollection 函数以使用 react 变量 datasetID您之前定义以建立当前数据集:

var createLocalCollection = function() {
    var values = My_First_Collection.find({datasetID: datasetID.get()}).fetch();
    var tempDoc = {};
    local.remove({});
    tempDoc = {};
    for (var i in values[0].value) {
      tempDoc.value = values[0].value[i];
      tempDoc.date = values[0].date[i];
      local.insert(tempDoc);
    }
};

使用这种方法，您可以让 D3 告诉您图表渲染何时完成，然后您的表格就可以开始填充了。结果是瞬时图表更新，然后是表格更新。也没有超时问题。