流星，在哪里放 d3 代码? [英] Meteor, where to put d3 code?

问题描述

我使用meteor、iron-router 和d3.d3用于根据我在iron-router的数据函数中计算的数据反应性地显示饼图.所以，我想让 d3 在 dom 到位时运行.

I use meteor, iron-router, and d3. d3 is used to reactively display a pie chart based on the data, which I calculate in the data function of iron-router. So, I want to the d3 to run when the dom is in place.

但是，我不知道应该将 d3 代码放在哪里.我曾经把它放在我生成数据的数据函数中.但是，有时在 dom 未准备好时计算 data 函数(因此 d3 无法绘制图表).

However, I don't know where I should put the d3 code. I used to put it in the data function that I generate the data. However, sometimes the data function is computed while the dom is not ready (so d3 cannot draw the chart).

我想在 dom 完全渲染后运行 d3，并且该函数可以访问 data 函数的结果.我尝试使用钩子 onAfterAction，但似乎此函数无法访问数据.我还尝试使用 Template..rendered，正如 stackoverflow 中的其他一些帖子所说.但是，渲染的函数似乎只运行一次，并且不会在数据更改时重新运行.我将渲染的函数放在 Tracker.autorun 函数中，但它仍然只能运行一次.

I would want to run d3 after the dom is completely rendered, and the function can access the result of the data function. I tried to use hooks onAfterAction, but it seems this function cannot access the data. I also tried to use Template..rendered, as some other posts in stackoverflow says. However, the rendered function seems to only run once, and it doesn't re-run when the data changes. I put the rendered function in Tracker.autorun function, but it still only get run once.

那么，有没有一个地方可以反应性地运行 d3 代码，它可以访问渲染的 dom 以及数据字段?

So, is there a place to run the d3 code reactively that can access the rendered dom as well as the data field?

谢谢.

推荐答案

你应该使用 onRendered 带有模板自动运行的回调.开箱即用，不适用于 1.0，但是有一个技巧 - 您可以使用 Template.currentData 像这样:

You should use the onRendered callback with a template autorun. Out of the box that doesn't work with 1.0, however there's a trick - you can get the autorun to rerun after a context change by using Template.currentData like this:

Template.myPictures.onRendered(function () {
  this.autorun(function () {
    var data = Template.currentData();
    // use data with d3 here
  });
});

有关详细信息，请参阅本期末尾.

For more details, see the end of this issue.

这篇关于流星，在哪里放 d3 代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！