将 d3 与流星集成？尝试绘制饼图答案

【问题标题】：Integrating d3 with meteor? Trying to draw pie charts将 d3 与流星集成？尝试绘制饼图
【发布时间】：2014-05-12 01:05:43
【问题描述】：

我正在尝试在 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 个单独的图表。

【问题讨论】：

提供一些细节——他们为什么不画画？你有什么收获吗？您是否看到任何错误消息？
没有错误信息——我真的不知道为什么。我对 Meteor 的工作原理不是很了解。为什么这些画在 Meteor 之外但不在 Meteor 之内？

标签： d3.js meteor

【解决方案1】：

您必须确保在通过代码访问 DOM 元素之前呈现模板。所以把你的 D3 代码放在一个模板渲染的方法中，像这样：

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

或在正文标签上，例如：

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

【讨论】：

【解决方案2】：

Template.chart.rendered = function(){

    Deps.autorun(function () {

       //d3 codeing here!!
    }
}

它对我有用。如果您在没有 Deps.autorun() 的情况下进行编码，它将不会呈现。哦！！在你的情况下，html页面上的另一件事可能是。但是对于我的情况，我使用 nvd3.org http://nvd3.org/livecode/index.html#codemirrorNav。我希望你能澄清这一点。

【讨论】：