【问题标题】:dc.js: ReduceSum with multiple CSVsdc.js:具有多个 CSV 的 ReduceSum
【发布时间】: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。如果这些都是错误的,那么您需要返回您的数据并确保 scorestotal 实际上都是数字。一切都是为了了解浏览器内置的调试器!
  • 我已经检查了scoresGroup.value()totalGroup.value(),他们最终得到了NaN。我还确认感兴趣的列都是数字的。还有其他想法吗?

标签: javascript d3.js dc.js crossfilter


【解决方案1】:

您需要使用return 才能从函数中返回值!

var scoresGroup = ndx.groupAll().reduceSum(function(d) {
      d.scores;
});
var totalGroup = ndx.groupAll().reduceSum(function(d) { 
      d.total;
});

应该是

var scoresGroup = ndx.groupAll().reduceSum(function(d) {
      return d.scores;
});
var totalGroup = ndx.groupAll().reduceSum(function(d) { 
      return d.total;
});

否则,您最终将求和 undefinedundefined 不是数字。 :-)

【讨论】:

  • 这是一个常见的错误。在许多编程语言中,最后一个表达式是结果。很高兴我能帮上忙。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-01-23
  • 1970-01-01
相关资源
最近更新 更多