流星饼图没有完全显示
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");
可能由于某些原因,您在客户端没有数据。
- 你订阅错了(我要看订阅方式)
- 该集合在客户端不可用(在
lib
文件夹)
谢谢大家....无需对代码进行任何更正。我通过更改文档的 _id
来实现它。我给了我自己的 _id
而不是 mongoldb
中自动生成的 _id
这是我用来使用 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");
可能由于某些原因,您在客户端没有数据。
- 你订阅错了(我要看订阅方式)
- 该集合在客户端不可用(在
lib
文件夹)
谢谢大家....无需对代码进行任何更正。我通过更改文档的 _id
来实现它。我给了我自己的 _id
而不是 mongoldb