图表呈现双重计算数据

时间:2015-06-23 14:15:29

标签: javascript d3.js dc.js

我正在尝试使用来自2个csv文件的数据创建仪表板。除了两列(得分和总数)包含不同的值之外,csv完全相同。由于dc.js的限制,我不得不聚合它们。但是,在渲染图表时,计数加倍(每个csv一个)。我的csv看起来与此相似:

“data1.csv”

agegroup    gender  group   scores  total
  18-24       M      1       0.04    1
  45-54       F      2       2.23    13
  25-34       M      1       0.74    6
  25-34       M      2       1.47    8
  18-24       F      1       2.88    7
  35-44       F      2       3.98    14

“data2.csv”

 agegroup   gender  group   scores  total
  45-54       F      1       4.93    8
  35-44       M      2       1.13    4
  18-24       M      1       5.28    9
  25-34       M      2       1.95    20
  18-24       F      1       0.52    18

理想情况下,我想要制作的仪表板可以总结总计和分数,具体取决于我选择data1.csv还是data2.csv,但如果我选择两者,它就不会' t两次总结我的totalscores列。

//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) {
          return d.scores;
        });
        var totalGroup = ndx.groupAll().reduceSum(function(d) { 
          return 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);

0 个答案:

没有答案