Question

我正在画一个d3甜甜圈。现在我想添加尽可能多的甜甜圈作为数据库中的条目。如果我向数据库添加内容，则自动更新失败。我必须在浏览器中重新加载我的代码 - 然后我看到新的甜甜圈。 Isnt 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>

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

Answer 1

你渲染的钩子处于错误的水平。现在你将它连接到包含甜甜圈的模板，当你想要以某种方式呈现每个甜甜圈时。首先，重新组织模板：

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

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

现在，您可以告诉节点渲染时要执行的操作：

Template.node.rendered = function() {
  // d3 code
}

每当重新渲染节点时，渲染的调用将自动运行，如果更改依赖关系，则会发生这种情况。如果nodes是mongodb游标之类的反应源，则会立即生效。否则，请添加更多代码，以便我们可以弄清楚还有什么。

Answer 2

只要其依赖项发生更改，

Meteor.autorun()就会运行。您需要在函数内部使用反应数据源。

Answer 3

找到更优雅的解决方案：

// 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();
};

之后用#donut_canvas上的把手进行迭代。 Meteor.autorun或Meteor.rendered给了我不可预知的甜甜圈 - 它还赠送了额外的甜甜圈。我当时不得不重装。

答案的灵感来自：Google map contained in meteor Template is rendered twice

感谢您的时间。

meteor add d3 grafics动态失败

3 个答案: