1

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>

私は何を間違っていますか。お時間をいただきありがとうございます。

4

3 に答える 3

2

レンダリングされたフックが間違ったレベルにあります。現在、各ドーナツを特定の方法でレンダリングしたいように見えるときに、ドーナツを含むテンプレートに接続しています。まず、テンプレートを再編成することから始めます。

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

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

これで、レンダリング時にノードに何をするかを指示できます。

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

レンダリングされた呼び出しは、ノードが再レンダリングされるたびに自動的に実行されます。これは、依存関係を変更した場合に発生します。nodesがmongodbカーソルのようなリアクティブソースの場合、これはすぐに機能します。それ以外の場合は、他に何が起こっているのかを把握できるように、コードを追加してください。

于 2013-01-11T11:19:33.913 に答える
1

Meteor.autorun()依存関係が変更されるたびに実行されます。関数内にリアクティブ データソースが必要です。

于 2013-01-11T10:19:13.147 に答える
0

よりエレガントな解決策を見つけました：

// 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マップは2回レンダリングされます

お時間をいただきありがとうございます。

于 2013-01-18T17:45:47.473 に答える