Integrating d3 with meteor? Trying to draw pie charts

问题

I'm trying to draw pie charts in Meteor, but I'm very new to both d3 and Meteor and am not really understanding what is going on.

The following d3 code to draw pie charts from a csv file works for me outside of Meteor:

<!DOCTYPE html>
<meta charset="utf-8">
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<style>

body {
  font: 30px "Montserrat";
  text-transform:uppercase;
}

svg {
  padding: 10px 0 0 10px;
}

.arc {
  stroke: #fff;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var radius = 150,
    padding = 10;

var color = d3.scale.ordinal()
    .range(["#f65c55","#c8e7ec"]);

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

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.population; });

d3.csv("data.csv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Criteria"; }));

  data.forEach(function(d) {
    d.ages = color.domain().map(function(name) {
      return {name: name, population: +d[name]};
    });
  });

  var legend = d3.select("body").append("svg")
      .attr("class", "legend")
      .attr("width", radius * 2)
      .attr("height", radius * 2)
    .selectAll("g")
      .data(color.domain().slice().reverse())
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * 50 + ")"; });

  legend.append("rect")
      .attr("width", 40)
      .attr("height", 40)
      .style("fill", color);

  legend.append("text")
      .attr("x", 50)
      .attr("y", 20)
      .attr("dy", ".35em")
      .attr("font-size","20px")
      .text(function(d) { return d; });

  var svg = d3.select("body").selectAll(".pie")
      .data(data)
    .enter().append("svg")
      .attr("class", "pie")
      .attr("width", radius * 2)
      .attr("height", radius * 2)
    .append("g")
      .attr("transform", "translate(" + radius + "," + radius + ")");

  svg.selectAll(".arc")
      .data(function(d) { return pie(d.ages); })
    .enter().append("path")
      .attr("class", "arc")
      .attr("d", arc)
      .style("fill", function(d) { return color(d.data.name); });

  svg.append("text")
      .attr("dy", ".35em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.Criteria; });

});

</script>

I also have a Meteor template as follows that I want to draw these charts in:

  <div class="tab-pane active" id="playback">
    {{> playback}}
  </div>

However, when I try and follow web tutorials to integrate the two, the graphs don't get drawn. Can anyone help me understand why? Thanks in advance!

EDIT: forgot to mention, data.csv looks like this:

Criteria,Disapproval, Approval
Too Fast,1,2
Too Slow,5,6
Clarity,2,3
Legibility,202070,343207

The first line is for the legend, and the rest are for 4 separate graphs.

回答1:

You have to make sure that the template is rendered before you access the DOM elements by code. So put your D3 code inside a template rendered method, like this:

Template.playback.rendered = function() {
    // your D3 code
}

or on the body tag e.g.:

UI.body.rendered = function() {
    // your D3 code
}

回答2:

Template.chart.rendered = function(){

    Deps.autorun(function () {

       //d3 codeing here!!
    }
}

It's working for me. If you're coding without Deps.autorun() it's will not render. Oh!! one morething at html page in you case maybe . However for my case I using nvd3.org http://nvd3.org/livecode/index.html#codemirrorNav. And this I hope you will clearify.

来源：https://stackoverflow.com/questions/23564449/integrating-d3-with-meteor-trying-to-draw-pie-charts

标签

d3.js

meteor