【发布时间】:2015-06-19 22:09:58
【问题描述】:
这是另一个 StackOverflow problem 的后续行动,将包含多个 CSV 的图表创建到单个 dc.js 仪表板中。
我按照说明进行操作,我的图表正常工作。但是,不起作用的是 numberDisplay 元素。我怀疑的是,由于我将两个 CSV 的总数制成表格,我将不得不调整 groupAll.reduceSum() 函数,但我不确定如何。下面是我的代码示例
//using queue.js to load data
var q = queue()
.defer(d3.csv, "data1.csv")
.defer(d3.csv, "data2.csv");
q.await(function(error, data1, data2){
//initiatizing crossfilter and ingesting data
var ndx = crossfilter();
ndx.add(data1.map(function(d){
return { age: d.age,
gender: d.gender,
scores: +d.scores,
total: +d.total,
type: 'data1'};
}));
ndx.add(data2.map(function(d){
return { age: d.age,
gender: d.gender,
scores: +d.scores,
total: +d.total,
type: 'data2'};
}));
//initializing charts
totalDisplay = dc.numberDisplay("#total-display");
totalScores = dc.numberDisplay("#total-scores");
//groupAll function to sum up the values
var scoresGroup = ndx.groupAll().reduceSum(function(d) {
d.scores;
});
var totalGroup = ndx.groupAll().reduceSum(function(d) {
d.total;
});
//parameters for the number display. Currently it is returning NaN
totalDisplay
.formatNumber(d3.format(","))
.valueAccessor(function(d) {
return d;
})
.group(totalGroup);
totalScores
.formatNumber(d3.format(",f"))
.valueAccessor(function(d) {
return d;
})
.group(scoresGroup);
任何帮助将不胜感激!
【问题讨论】:
-
小提琴会有所帮助,和/或您在 JavaScript 控制台中看到的任何错误。比“它不起作用”更具体 - 是错误还是错误值?
-
现在,它只是简单地返回 NaN 值,我在我的 cmets 中声明了它。控制台中没有错误,它只是返回多个 CSV 文件中指定列的总和。我将努力制作一个可行的 jsfiddle。
-
我明白了。首先在评论下方的
return d;上打断点,看看能否修复访问器 -
要检查的另一件事是
scoresGroup.value()和totalGroup.value()本身不是NaN。如果这些都是错误的,那么您需要返回您的数据并确保scores和total实际上都是数字。一切都是为了了解浏览器内置的调试器! -
我已经检查了
scoresGroup.value()和totalGroup.value(),他们最终得到了NaN。我还确认感兴趣的列都是数字的。还有其他想法吗?
标签: javascript d3.js dc.js crossfilter