流星饼图没有完全显示

meteor piechart doesn't show up completely

这是我用来使用 Meteor 在网页上呈现饼图的 JS 代码。我遇到的问题是这段代码几乎可以工作,除了显示的图表显示在图例和标签上但我们看不到饼图(它只是空的)。 javaScript 代码为

[我不能post这里的图片]

if (Meteor.isClient) {

Template.pienvd3.rendered = function() {

    nv.addGraph(function() {
                var pchart = nv.models.pieChart()
                .x(function(d) { return d.label })
                .y(function(d) { return d.value })
                .showLabels(true);

                d3.select("#piechart svg")
                .datum(pieVar.find().fetch())
                .transition().duration(350)
                .call(pchart);

                return pchart;
                });
};}

这是我在 MongoDB 中的 collection 的名字 "pienvd3"

{
"_id" : ObjectId("54d37d5b30cd72c0dde2611b"),
"label" : "One",
"value" : 29.765957771107
}
{
"_id" : ObjectId("54d37d5b30cd72c0dde2611c"),
"label" : "Two",
"value" : 0
}
--- so on till Eight---
{
"_id" : ObjectId("54d37d5b30cd72c0dde26121"),
"label" : "Seven",
"value" : 13.925743130903
 }
{
"_id" : ObjectId("54d37d5b30cd72c0dde26122"),
"label" : "Eight",
"value" : 5.1387322875705
}

我发布了 collection 也声明了它

Meteor.publish(null, function () {
           return pieVar.find();
           });
pieVar = new Meteor.Collection("pienvd3");
pieVar.allow({
         insert: function () {
         return true;
         },
         update: function () {
         return true;
         },
         remove: function () {
         return true;
         }
         });

现在我实际上无法理解到底是什么问题。 P.S:我需要使此图表具有反应性,并且我已经包含了 d3 的所有必要包。当我刷新页面时,甚至这张图片也消失了,说没有找到数据

谢谢

在函数外改return

Template.pienvd3.rendered = function() {

    nv.addGraph(function() {
                var pchart = nv.models.pieChart()
                .x(function(d) { return d.label })
                .y(function(d) { return d.value })
                .showLabels(true);

                d3.select("#piechart svg")
                .datum(pieVar.find().fetch())
                .transition().duration(350)
                .call(pchart);         
                });
  return pchart;
};}

就像@johnnytop 说的,如果你有 autopublish 包删除,蜜蜂一定要订阅这个集合。

Meteor.subscribe('pienvd3');

Router.route('/testPage', {name: 'testPage'});
this.route('testPage', {
  path: '/testPage',
    waitOn: function(){
        return Meteor.subscribe("pieVar");
    },
    data: function(){
      return return pieVar.find();;
    }
});

我也不知道为什么,但你正在发布 Null 数据

改成这个。

Meteor.publish('pieVar' function () {
           return pieVar.find();
          });

也像这样在 lib 文件夹中声明此集合 /lib/collections.js

pieVar = new Meteor.Collection("pieVar");

可能由于某些原因,您在客户端没有数据。

  1. 你订阅错了(我要看订阅方式)
  2. 该集合在客户端不可用(在 lib 文件夹)

谢谢大家....无需对代码进行任何更正。我通过更改文档的 _id 来实现它。我给了我自己的 _id 而不是 mongoldb

中自动生成的 _id