javascript - 如何在 Meteor.js #each 包装器中生成多个 SVG

Question

您好，我目前有一个模板助手，它返回一个数组，其中包含用于在 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;
        }

我正在尝试为表中的每个元素创建一个饼图 react 饼图，但我似乎无法访问停止模板中的 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();
      });

  });


    }

}

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

Answer 1

我建议将您的 d3 代码包装在 Deps.autorun() 函数中，因为最有可能发生的情况是，当您的饼图绑定(bind)到数据函数时，您的数据尚不可用，因此不会呈现任何内容。

Template.donutChart.rendered = function() {

Tracker.autorun(function () { 

//all d3 code

});

}

您看起来像是在进一步使用自动运行，但不是为了获取数据。