DC.js 두 개의 lineChart가있는 compositeChart는 둘 다 날짜의 평균값을 나타냅니다.

Question

DC.js 차트는 날짜 별 평균 값을 나타내는 두 줄로 만들고 싶습니다.

나는이 작업을 수행 할 수있는 방법은 dc.js를 compositeChart를 사용하고 넣어 두 lineCharts를 만든 다음 평균 금액을 얻기 위해 reducio()group.reduce(add, remove, initial)을 사용하는 것입니다 생각합니다.

제 질문은 어디에 조건부 논리가 있습니까?

var group = dimension.group().reduce(reduceAdd, reduceRemove, reduceInitial); 

d.PPCC === "PPCC" 및 d.PPCC === "Other" 레코드에 대한 또 다른 평균 레코드에 대한 평균을 계산하는 데 어떻게/어디 조건이 사용합니까?

두 가지 방법 중 어느 것도 나를 위해 작동하지 않았습니다.

이

먼저 시도이다

Uncaught TypeError: reduceInitial is not a function 

:과 같은 오류가 발생

var bounce30DaysPPCC = dateDim.group().reduce(function(d) { if (d.PPCC === "PPCC") 
{ return reduceAdd, reduceRemove, reduceInitial; } else { return 0; }}); 

var bounce30DaysOther = dateDim.group().reduceSum(function(d) { if (d.PPCC === "Other") 
{ return reduceAdd, reduceRemove, reduceInitial; } else { return 0; } }); 

이 오류가 발생

var bounce30DaysPPCC = function(d) { if (d.PPCC === "PPCC") 
{ dateDim.group().reduce(reduceAdd, reduceRemove, reduceInitial); 
} else { dateDim.group().reduce(0); } }; 

var bounce30DaysOther = function(d) { if (d.PPCC === "Other") 
{ dateDim.group().reduce(reduceAdd, reduceRemove, reduceInitial); 
} else { dateDim.group().reduce(0); } }; 

:

dc.js:4017 Uncaught TypeError: layer.group.all is not a function 

이 두 번째 시도는

여기 내 전체 자바 스크립트 코드입니다.

<script type="text/javascript"> 

    // get csv data 
    d3.csv("merged.csv", function(data) { 

    // get csv data and format date 
    var parseDate = d3.time.format("%Y-%m-%d").parse; 

    data.forEach(function(d) { 
     d.date = parseDate(d.date); 
     d.sessions = +d.sessions; 
     d.ad_requests = +d.ad_requests; 
     d.bounceRate = +d.bounceRate; 
     d.clicks = +d.clicks; 
     d.earnings = +d.earnings; 
     d.newUsers = +d.newUsers; 
     d.sessionDuration = +d.sessionDuration; 
     d.sessionsPerUser = +d.sessionsPerUser; 
     d.twitterSessions = +d.twitterSessions; 
     d.users = +d.users; 
    }); 

    // setup crossfilter 
    var ndx = crossfilter(data); 

    // create dimension 
    var dateDim = ndx.dimension(function(d) { return d["date"]; }); 

    // create data groups 
    var bounce30DaysPPCC = function(d) { if (d.PPCC === "PPCC") 
    { dateDim.group().reduce(reduceAdd, reduceRemove, reduceInitial); 
    } else { dateDim.group().reduce(0); } }; 

    var bounce30DaysOther = function(d) { if (d.PPCC === "Other") 
    { dateDim.group().reduce(reduceAdd, reduceRemove, reduceInitial); 
    } else { dateDim.group().reduce(0); } }; 

    // create min and max dates to limit chart x axis values 
    var minDateTime = new Date(new Date().setDate(new Date().getDate()-30)); 

    var maxDateTime = new Date(new Date().setDate(new Date().getDate()+1)); 

    // create chart  
    BounceChart30Day = dc.compositeChart("#bounce-chart-30day"); 

    // create two line charts to put into composite chart 
    var ppccLine = dc.lineChart(BounceChart30Day) 
    .group(bounce30DaysPPCC)  

    var otherLine = dc.lineChart(BounceChart30Day) 
    .group(bounce30DaysOther) 

    // create composite chart 
    BounceChart30Day 
    .height(50) 
    .width(450) 
    .margins({top: 10, right: 10, bottom: 5, left: 35}) 
    .dimension(dateDim) 
    .transitionDuration(500) 
    .brushOn(false) 
    .elasticY(true) 
    .compose([ppccLine, otherLine]) 
    .x(d3.time.scale().domain([minDateTime, maxDateTime])) 
    .yAxis().ticks(3); 

    // create value accessor to calculate averages 
    BounceChart30Day.valueAccessor(function(p) { 
    return p.value.count > 0 ? p.value.total/p.value.count : 0; }); 

    // create add, remove, initial reduce functions 
    function reduceAdd(p, v) { 
     ++p.count; 
     p.total += v.bounceRate; 
     return p; 
    } 

    function reduceRemove(p, v) { 
     --p.count; 
     p.total -= v.bounceRate; 
     return p; 
    } 

    function reduceInitial() { 
     return {count: 0, total: 0}; 
    } 

    // render chart 
    dc.renderAll(); 

</script> 

Answer 1

감소 함수 내에서 데이터를 평가해야합니다.

// create add, remove, initial reduce functions 
function reduceAdd(p, v) { 
    if (v.PPCC === "PPCC") { 
    ++p.PPCCcount; 
    p.PPCCtotal += v.bounceRate; 
    } else if(v.PPCC === "Other") { 
    ++p.Othercount; 
    p.Othertotal += v.bounceRate; 
    } 
    return p; 
} 

function reduceRemove(p, v) { 
    if (v.PPCC === "PPCC") { 
    --p.PPCCcount; 
    p.PPCCtotal -= v.bounceRate; 
    } else if(v.PPCC === "Other") { 
    --p.Othercount; 
    p.Othertotal -= v.bounceRate; 
    } 
    return p; 
} 

function reduceInitial() { 
    return { PPCCcount: 0, PPCCtotal: 0, Othercount: 0, Othertotal: 0}; 
} 

은 그럼 그냥 정상으로 당신의 그룹을 만들 : 다른

var bounce30DaysPPCC = dateDim.group().reduce(reduceAdd, reduceRemove, reduceInitial); 
var bounce30DaysOther = dateDim.group().reduceSum(reduceAdd, reduceRemove, reduceInitial); 

모든 것은 첫눈에 거의 확인을 보이는 그래서 절감 기능은 다음과 같이 보일합니다. 그룹의 새 속성 이름을 가져 오려면 valueAccessor 함수를 업데이트하기 만하면됩니다.