crossfilter减少条形图p.value和p.key上的平均平均显示

时间:2015-01-19 09:24:12

标签: reduce dc.js crossfilter accessor

我目前正在研究crossfilter示例,以便利用股票股票的数据制作有趣的基准。 下面是tsv文件中的数据示例。

symbol  quarter grossprofit totalrevenue    ebitda  sector 
ABI.BR  Q1  7273000000  12239000000 3858000000  Ind
ABA.BR  Q2  7334000000  12201000000 3817000000  Ind
AA.BR   Q3  6318000000  10605000000 3097000000  Serv
A.BR    Q4  7229000000  11711000000 4185000000  Serv
ADC.PA  Q1  188000000   1297000000  110000000   Agri
SD.PA   Q2  188000000   1297000000  110000000   Agri
SQ.PA   Q3  247000000   1421000000  169000000   Customer
AC.PA   Q4  247000000   1421000000  169000000   Customer
GF.PA   Q1  3432000000  3432000000  671000000   Ind
RF.PA   Q2  3400000000  3400000000  631000000   Ind
ER.PA   Q3  3422000000  3422000000  713000000   Agri
TG.PA   Q4  3239000000  3239000000  349000000   Agri

这个想法是创建每个扇区的ebitda的平均值,无论季度或符号如何,并以条形图显示结果。

下面是我使用的交叉滤波器代码:

var ndx = crossfilter(mydata);
var all = ndx.groupAll();

var SectorDim = ndx.dimension(function (d) { return d.sector; });
var SectorDimGroup = SectorDim.group().reduce(
//add
function(p,v){
p.count++;
p.sec = v.sector;
p.sum += v['totalrevenue']/100000000;
p.avg = d3.round((p.sum/p.count),2);
return p;
},
//remove
function(p,v){
p.count--;
p.sec = v.sector;
p.sum -= v['totalrevenue']/100000000;
p.avg = d3.round((p.sum/p.count),2);
return p;
},
//init
function(p,v){
   return {count:0, sec:0,  avg:0, sum:0};
}
);

var result = SectorDimGroup.top(Infinity);
console.log("result variable");
console.log(result);
var minD = SectorDim.bottom(1)[0].sector;
console.log(minD);
var maxD = SectorDim.top(1)[0].sector;
console.log(maxD);
var mychart = dc.barChart("dc-bar-chart");


mychart.width(420)
.height(250)
.margins({top: 10, right: 50, bottom: 30, left: 40})
.dimension(SectorDim)
.group(SectorDimGroup)
.valueAccessor(function (p) {
return p.value.avg;
})
//    .brushOn(false)
//    .elasticY(true)
   .x(d3.scale.ordinal())
  .xUnits(dc.units.ordinal);

从crossfilter的分组中我得到一个像{key:Serv,value {avg:123,sum:3456}}

的对象

我试图在x轴上显示行业部门(Serv,Agri,...),并在y轴上显示每个部门的平均值(p.value.avg)。

不幸的是,它根本不起作用。

1 /你有什么线索吗? 2 /第二步将按季度分组并进行相同的练习,如果您有任何方法可以管理双重"分组"这会很棒 ?

1 个答案:

答案 0 :(得分:0)

您只是向图表构造函数提供了无效的选择器

使用#对它们进行前缀似乎可以解决问题:

    var mychart = dc.barChart("#dc-bar-chart");
    var V1Chart = dc.rowChart("#dc2");

http://jsfiddle.net/1hmb09e7/3/

(我还将javascript库指向公共CDN,因为它看起来像原始服务器还没有工作。)

如果dc.js指出它正在尝试在void中创建元素,那么would be nice

您下次也可以尝试最小化您的示例,因为这与您认为的问题无关。 ; - )