D3.js meteor添加d3 grafics动态失败

我在画一个d3甜甜圈。现在我想在数据库中添加尽可能多的甜甜圈条目。若我向数据库中添加了一些内容，自动更新就会失败。我必须在浏览器中重新加载代码，然后我才能看到新的甜甜圈。Meteor.autorun不是自动更新吗？ 代码是：

  Template.donuts.rendered = function (){

    var self = this;
    self.node = self.find("p");

    // Data
    var dataset = {
      apples: [2, 2, 2, 2, 2]
    };

    //Width and height
    var width = 100,
        height = 100,
        radius = Math.min(width, height) / 2;

    // render
    self.handle = Meteor.autorun(function () {

      var color = d3.scale.category10();

      var pie = d3.layout.pie()
        .sort(null);

      var arc = d3.svg.arc()
          .innerRadius(radius - 20)
          .outerRadius(radius - 5);

      var svg = d3.select(self.node).append("svg")
          .attr("width", width)
          .attr("height", height)
          .append("g")
          .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

      var path = svg.selectAll("path")
          .data(pie(dataset.apples))
          .enter().append("path")
          .attr("fill", function(d, i) { return color(i); })
          .attr("d", arc);
    });

  }; //Template.donuts

它被称为通过车把

<template name="donuts">
  {{#each nodes}}
      <p></p>
  {{/each}}
</template>

{{{#每个节点}}

{{/每个}}

---

我做错了什么。谢谢您的时间。

Meteor.autorun（）将在其依赖项发生更改时运行。函数中需要一个反应式数据源。

渲染的钩子级别错误。现在，您正在将它连接到包含甜甜圈的模板，而看起来您希望以某种方式呈现每个甜甜圈。首先，从重新组织模板开始：

<template name="donuts">
  {{#each nodes}}
    {{> node}}
  {{/each}}
</template>

<template name="node"><p></p></template>

---

只要重新渲染节点，就会自动运行渲染调用，如果更改依赖项，就会发生这种情况。如果

节点

是一个像mongodb游标一样的反应源，那么它将立即工作。否则，请添加更多代码，以便我们了解其他情况。

找到了更优雅的解决方案：

// Donuts                           //
function donutinit() {

  var dataset = {
    apples: [2, 2, 2, 2, 2]
  };

  //Width and height
  var width = 100,
      height = 100,
      radius = Math.min(width, height) / 2;

  // render
  var color = d3.scale.category10();

  var pie = d3.layout.pie()
    .sort(null);

  var arc = d3.svg.arc()
      .innerRadius(radius - 20)
      .outerRadius(radius - 5);

  var svg = d3.select("#donut_canvas").append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

  var path = svg.selectAll("path")
      .data(pie(dataset.apples))
      .enter().append("path")
      .attr("fill", function(d, i) { return color(i); })
      .attr("d", arc);
};

Template.donut.rendered = function() {
  donutinit();
};

在那之后，用把手在油炸圈饼画布上迭代。Meteor.autorun或Meteor.rendered给了我无法预测的甜甜圈数量-它提供了额外的甜甜圈。当时我不得不重新装填

答案来自这里：

谢谢你抽出时间

// Donuts                           //
function donutinit() {

  var dataset = {
    apples: [2, 2, 2, 2, 2]
  };

  //Width and height
  var width = 100,
      height = 100,
      radius = Math.min(width, height) / 2;

  // render
  var color = d3.scale.category10();

  var pie = d3.layout.pie()
    .sort(null);

  var arc = d3.svg.arc()
      .innerRadius(radius - 20)
      .outerRadius(radius - 5);

  var svg = d3.select("#donut_canvas").append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

  var path = svg.selectAll("path")
      .data(pie(dataset.apples))
      .enter().append("path")
      .attr("fill", function(d, i) { return color(i); })
      .attr("d", arc);
};

Template.donut.rendered = function() {
  donutinit();
};