Question

我是Meteor.js的新手但是我需要制作一些像http://nvd3.org/examples/pie.html这样的图表。我不知道在我的html页面上呈现数据。

  Pie = new Meteor.Collection("pie");

  if (Meteor.isClient) {
    Template.chart.created = function(){ //not sure for template style.
        _.defer(function () {

            Deps.autorun(function () {
                pp = Pie.find({}, {fields: {_id: 0}});
                exampleData = _.toArray(pp);
                console.log(exampleData);
                //Regular pie chart example
                nv.addGraph(function() {
                  var chart = nv.models.pieChart()
                      .x(function(d) { return d.label })
                      .y(function(d) { return d.value })
                      .showLabels(true);

                    d3.select("#chart svg")
                        .datum(exampleData)
                        .transition().duration(350)
                        .call(chart);

                  return chart;
                });

                //Donut chart example
                nv.addGraph(function() {
                  var chart = nv.models.pieChart()
                      .x(function(d) { return d.label })
                      .y(function(d) { return d.value })
                      .showLabels(true)     //Display pie labels
                      .labelThreshold(.05)  //Configure the minimum     slice size for labels to show up
                      .labelType("percent") //Configure what type of   data to show in the label. Can be "key", "value" or "percent"
                      .donut(true)          //Turn on Donut mode. Makes pie chart look tasty!
                      .donutRatio(0.35)     //Configure how big you want the donut hole size to be.
                      ;

                    d3.select("#chart2 svg")
                        .datum(exampleData)
                        .transition().duration(350)
                        .call(chart);

                  return chart;
                });
            });
        });
    }

}

  if (Meteor.isServer) {
  Meteor.startup(function () {

    if(Pie.find().count() === 0) {
        var data = [
              { 
                "label": "One",
                "value" : 29.765957771107
              } , 
              { 
                "label": "Two",
                "value" : 0
              } , 
              { 
                "label": "Three",
                "value" : 32.807804682612
              } , 
              { 
                "label": "Four",
                "value" : 196.45946739256
              } , 
              { 
                "label": "Five",
                "value" : 0.19434030906893
              } , 
              { 
                "label": "Six",
                "value" : 98.079782601442
              } , 
              { 
                "label": "Seven",
                "value" : 13.925743130903
              } , 
              { 
                "label": "Eight",
                "value" : 5.1387322875705
              }
            ];

        for(var i=0; i < data.length; i++){
            Pie.insert({
                label: data[i].label,
                value: data[i].value
            });
        }
    }

  });
  }

d3.html

    <head>
 <meta charset="utf-8">
  <title>d3</title>

 </head>

 <body>
  {{> chart}}
 </body>

 <template name="chart">
 <div width="500" height="500">
 <svg id="chart"></svg>
 <svg id="chart2"></svg>
 </div>
 </template>

Answer 1

在Blaze和Blaze之前使用Meteor进行测试：只需在模板的Deps.autorun回调中启动rendered，然后将d3绘图代码放在那里。

在V.0.8.0之前的Meteor中，您需要将svg部分包装到#constant区域，但是一旦使用Blaze，就没有必要。

另一种方法是在rendered回调中绘制一次，然后启动observeChanges并保持d3视图模型的最新状态。

我在这里有一个简单的例子：https://github.com/Slava/d3-meteor-basic

Meteor.js与D3

1 个答案: