如何生成多个SVG's在Meteor.js#每个包装中

嗨，我现在有一个模板助手，它向我返回一个数组，其中包含用于在HTML中的表中生成不同行的各种值。

<template name="stop">  
   {{#each thumb}}
  <tr>
    <td>
       <h2> Do you like this product? </h2>
       <h2>{{text}}</h2>
      <svg id="donutChart">  </svg>
    </td>
  </tr>
  {{/each}}
</template>

它还包含一个svg标记，我还想为作为表行生成的每个元素生成一个图，这就是模板助手的样子。

 Template.stop.helpers({
        'thumb': function(data) {
            var result = tweetImages.findOne();
            var newResult = [];
            for (var i = 0; i < result.data.length; i++) {
                newResult[i] = {
                    data: result.data[i],
                    text: result.text[i]
                };
            }
            console.log(newResult)
            return newResult;
        }

我试图为表中的每个元素创建一个饼图，但我似乎无法访问停止模板中的svg。

d3代码在该表之外运行良好，但似乎无法为表的每个元素生成，因为它无法访问svg元素。

Template.donutChart.rendered = function() {
//my d3 code is here

     //Width and height
  var w = 300;
  var h = 300;
  var center = w / 2;
  var outerRadius = w / 2;
  var innerRadius = 0;
  var radius = 150;
  var arc = d3.svg.arc()
      .innerRadius(40)
      .outerRadius(radius + 10 - 25);
  var pie = d3.layout.pie()
      .sort(null)
      .value(function(d) {
          return d.data;
      });

  //Create SVG element  
  var svg = d3.select("#donutChart")
      .attr("width", w)
      .attr("height", h)
      .attr("transform", "translate(" + 200 + "," + 100 + ")");
  // GROUP FOR CENTER TEXT
  var center_group = svg.append("svg:g")
      .attr("class", "ctrGroup")
      .attr("transform", "translate(" + (w / 2) + "," + (h / 2) + ")");
  // CENTER LABEL
  var pieLabel = center_group.append("svg:text")
      .attr("dy", ".35em").attr("class", "chartLabel")
      .attr("text-anchor", "middle")
      .text("Clothes")
      .attr("fill", "white");

  Deps.autorun(function() {
      var modifier = {
          fields: {
              value: 1
          }
      };

      Deps.autorun(function() {
          var arcs = svg.selectAll("g.arc")
              .data(pie(players))
          var arcOutter = d3.svg.arc()
              .innerRadius(outerRadius - 10)
              .outerRadius(outerRadius);
          var arcPhantom = d3.svg.arc()
              .innerRadius(-180)
              .outerRadius(outerRadius + 180);
          var newGroups =
              arcs
              .enter()
              .append("g")
              .attr("class", "arc")
              .attr("transform", "translate(" + 150 + "," + 150 + ")")
          //Set up outter arc groups
          var outterArcs = svg.selectAll("g.outter-arc")
              .data(pie(players))
              .enter()
              .append("g")
              .attr("class", "outter-arc")
              .attr("transform", "translate(" + 150 + ", " + 150 + ")");
          //Set up phantom arc groups
          var phantomArcs = svg.selectAll("g.phantom-arc")
              .data(pie(players))
              .enter()
              .append("g")
              .attr("class", "phantom-arc")
              .attr("transform", "translate(" + center + ", " + center + ")");

          outterArcs.append("path")
              .attr("fill", function(d, i) {
                  return slickColor[i];
              })
              .attr("fill-opacity", 0.85)
              .attr("d", arcOutter).style('stroke', '#0ca7d2')
              .style('stroke-width', 2)

          //Draw phantom arc paths
          phantomArcs.append("path")
              .attr("fill", 'white')
              .attr("fill-opacity", 0.1)
              .attr("d", arcPhantom).style('stroke', '#0ca7d2')
              .style('stroke-width', 5);

          //Draw arc paths
          newGroups
              .append("path")
              .attr("fill", function(d, i) {
                  return slickColor[i];
              })
              .attr("d", arc);
          //Labels
          newGroups
              .append("text")
          .attr("transform", function(d) {
                  return "translate(" + arc.centroid(d) + ")";
              })
              .attr("text-anchor", "middle")
              .text(function(d) {
                  return d.value;
              })
              .style("font-size", function(d) {
                  return 24;
              })

          svg.selectAll("g.phantom-arc")
              .transition()
              .select('path')
              .attrTween("d", function(d) {
                  this._current = this._current || d;
                  var interpolate = d3.interpolate(this._current, d);
                  this._current = interpolate(0);
                  return function(t) {
                      return arc(interpolate(t));
                  };
              });

          arcs
              .transition()
              .select('path')
              .attrTween("d", function(d) {
                  this._current = this._current || d;
                  var interpolate = d3.interpolate(this._current, d);
                  this._current = interpolate(0);
                  return function(t) {
                      return arc(interpolate(t));
                  };
              });
          arcs
              .transition()
              .select('text')
              .attr("transform", function(d) {
                  return "translate(" + arc.centroid(d) + ")";
              })
              .text(function(d) {
                  return d.value;
              })
              .attr("fill", function(d, i) {
                  return textColor[i];
              })
          arcs
              .exit()
              .remove();
      });
  });

    }

}

我似乎找不到太多关于在每个包装器的模板中使用d3.js或SVG的信息。如有任何帮助，我们将不胜感激。