流星饼图没有完全显示答案

【问题标题】：meteor piechart doesn't show up completely流星饼图没有完全显示
【发布时间】：2015-02-23 14:24:52
【问题描述】：

这是我使用 Meteor 在网页上呈现饼图的 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 的所有必要包。当我刷新页面时，即使这张图片消失了，说没有找到数据

谢谢

【问题讨论】：

我在控制台中也收到RangeError: Maximum call stack size exceeded. 错误

标签： javascript mongodb d3.js meteor reactiveui

【解决方案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();;
    }
});

也不知道为什么，但你发布的是Null数据

改成这个。

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

同时在lib 文件夹中声明这个集合，像这样/lib/collections.js

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

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

您订阅错误（我需要查看订阅方式）
该集合在客户端上不可用（在 lib文件夹）

【讨论】：

所以应该是nv.addGraph function，你用的是什么package，我可以看看文档吗？
如果你上传这个流星垫会很好

【解决方案2】：

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

【讨论】：