dc.js 条形图 - 通过多个数据条目的总和计算条形大小

Question

Sorry for the title, it is hard to sumarize what I am trying to achieve in one sentence.

I have a bar chart that uses a crossfilter that is also used by 6 other charts. My data looks as follows (note: this is only a small sample, there are more keys in each object)

var data = [
    { clientime : '20210603000000', calendarweek : '22', x :  9, y :  4 },
    { clientime : '20210603000007', calendarweek : '22', x :  5, y :  5 },
    { clientime : '20210607000000', calendarweek : '23', x :  1, y :  2 },
    { clientime : '20210607000007', calendarweek : '23', x :  5, y :  5 },
    { clientime : '20210615000000', calendarweek : '24', x : 10, y : 20 },
    { clientime : '20210615000011', calendarweek : '24', x :  5, y :  5 },
];

The category for each bar is the calendarweek and I wan the the value to be the sum of all x devided by the sum of all y.

According to the above sample I would like to see 3 bars.

Bar '22' should have the value `sum(9,5)/sum(4,5)` = 1.556
Bar '23' should have the value `sum(1,5)/sum(2,5)` = 0.857
Bar '24' should have the value `sum(10,5)/sum(20,5)` = 0.6

My first intention wasto use the reduce function where I would add or remove the sums in a custom dictionary.

var x_key = "calendarweek";
var dim = crossfilter.dimension( d => d[x_key] );
var grp = dim.group().reduce(
    ( p, v ) => {
        p.sum_x += v.x;
        p.sum_y += v.y;
        return p;
    },
    ( p, v ) => {
        p.sum_x -= v.x;
        p.sum_y -= v.y;
        return p;
    },
    () => ( { sum_x : 0, sum_y : 0 } )
);

var chart = dc.barChart( "#chart" );
chart
    .width( 490 )
    .height( 280 )
    .dimension( dim )
    .group( grp )
    .x( d3.scaleBand() )
    .xUnits( dc.units.ordinal )
    .elasticX( true )
    .elasticY( true )
    .controlsUseVisibility( true )
    .margins( {
        top    : 10, right  : 50, bottom : 20, left   : 40,
    } );

grp.all() does seem to look fine but from here on out I am not sure how to set the data correctly to chart. Using the created group no bars are shown at all because I creted an object in the reduce function that dc.js does not understand.

Additionally I would like to still be able to limit the bars to N entries.

Answer 1

Thanks to Gordon in the comments pointing me into the right direction I was able to solve my problem using the valueAccesor .

chart_mttrhist.valueAccessor( function( d ) {
    return ( d.value.sum_x / d.value.sum_y );
} );

Please note that the code in the question changed a little.