Question

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

[我无法在此处发布图片]

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中的名字“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
}

我发布了该集合并宣布了它

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的所有必要包。当我刷新页面时，即使这个图像消失，说没有找到数据

谢谢

Answer 1

更改功能外的回报。

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();;
    }
});

此外，idont知道原因，但您要发布Null数据

改变这一点。

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

同样在lib文件夹中声明此集合，如/lib/collections.js

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

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

您正在订阅错误（我需要查看订阅方法）
在客户端上没有的集合（在上面声明它们 lib文件夹）

Answer 2

谢谢大家....无需对代码进行任何更正。我通过更改文档的_id来实现它。我在mongoldb

中提供了自己的_id而不是自动生成的_ids

流星饼图并没有完全显示出来

2 个答案: