Question

我正在尝试在Meteor中绘制饼图，但我对d3和Meteor都很新，并且我不太了解发生了什么。

以下用于从csv文件中绘制饼图的d3代码在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>

我还有一个如下的Meteor模板，我想在这些图表中绘制：

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

但是，当我尝试按照网络教程集成两者时，图表不会被绘制。谁能帮我理解为什么？提前谢谢！

编辑：忘了提，data.csv看起来像这样：

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

第一行用于图例，其余用于4个单独的图表。

Answer 1

在按代码访问DOM元素之前，必须确保呈现模板。因此，将D3代码放在模板渲染方法中，如下所示：

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

或在身体标签上，例如：

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

Answer 2

Template.chart.rendered = function(){

    Deps.autorun(function () {

       //d3 codeing here!!
    }
}

它为我工作。如果您在没有Deps.autorun（）的情况下进行编码，则无法呈现。哦！！在你的情况下，在html页面上还有一件事。但是对于我的情况，我使用的是nvd3.org http://nvd3.org/livecode/index.html#codemirrorNav。我希望你能澄清一下。

将d3与流星整合？试图绘制饼图

2 个答案: