working number dc.js로 디스플레이

Question

pieChart 및 lineChart와 함께 작동하는 numberDisplay를 가져 오려고합니다. 내가 잘못하고있어. 근데 뭐?

아래 코드는 http://jsfiddle.net/1nf3d8kc/3/을 참조하십시오.

numberDisplay에 금액을 표시하려고합니다. pieChart를 클릭하면 번호가 업데이트됩니다.

sumAllAmount = date.groupAll().reduceSum(function(d) {return d.data.amount;}), 

숫자 디스플레이의 이상한 특질을 :

var parseDate = d3.time.format("%Y-%m-%d").parse; 

var json = [ 
{ 
    data: { 
    amount: 450, 
    total_amount: 97.331, 
    unit_amount: 12.977, 
    date: "2013-12-30" 
    }, 
    company: { 
    id: 4, 
    name: "KLM" 
    } 
}, 
{ 
    data: { 
    amount: 960, 
    total_amount: 176.550, 
    unit_amount: 22.069, 
    date: "2014-01-06" 
    }, 
    company: { 
    id: 4, 
    name: "KLM" 
    } 
}, 
    { 
    data: { 
    amount: 510, 
    total_amount: 93.793, 
    unit_amount: 11.034, 
    date: "2014-01-15" 
    }, 
    company: { 
    id: 1, 
    name: "NS" 
    } 
}, 
    { 
    data: { 
    amount: 960, 
    total_amount: 207.640, 
    unit_amount: 25.955, 
    date: "2014-01-22" 
    }, 
    company: { 
    id: 1, 
    name: "NS" 
    } 
}, 
    { 
    data: { 
    amount: 900, 
    total_amount: 194.6626, 
    unit_amount: 25.955, 
    date: "2014-02-12" 
    }, 
    company: { 
    id: 1, 
    name: "NS" 
    } 
} 
]; 

var startDate = new Date(json[0].data.date); 
var endDate = new Date(json[json.length-1].data.date); 

json.forEach(function(d) { 
    d.data.date = parseDate(d.data.date); 
}); 

// Set up dimensions and groups 
var ndx = crossfilter(json), 
    date = ndx.dimension(function(d) { return d.data.date; }), 
    sumAmount = date.group().reduceSum(function(d) {return d.data.amount;}), 

    companyDimension = ndx.dimension(function(d) { 
    return d.company.name; 
    }), 
    companyDimensionGroup = companyDimension.group(function(d) {return d;}) 
    ; 

// Charts 
var numberDisplay = dc.numberDisplay('#number-chart'); 
numberDisplay.group(sumAmount) 
    .formatNumber(d3.format(".g")) 
    .valueAccessor(function(d) { return d.value }); 

var chart = dc.lineChart("#date-chart"); 
chart.dimension(date) 
    .width(500) 
    .group(sumAmount, 'Amount') 
    .elasticY(true) 
    .round(d3.time.day.round) 
    .x(d3.time.scale() 
    .domain([startDate, endDate]) 
) 
    .filter([startDate, endDate]); 

var pieChart = dc.pieChart("#pie-chart"); 
pieChart.dimension(companyDimension) 
    .group(companyDimensionGroup) 
    .width(300) 
    .height(300) 
    .slicesCap(4) 
    .innerRadius(30); 

dc.renderAll(); 

Answer 1

나는 당신이 date.groupAll()을 사용하여 다른 그룹을 필요로하는 경우에 날짜 차트에있는 모든 값의 합계를 표시 할 것을 의미하는 생각 .value() 메서드가 the special groupAll object을 지원하더라도 반환 된 값에 valueAccessor를 적용 할 것으로 예상됩니다. doesn't make any sensegroupAll.value()이 아니기 때문에 은 키/값 쌍을 반환합니다.

그래서 당신은이 작업을 얻기 위해 신원 접근을 지정해야합니다

numberDisplay.group(sumAllAmount) 
    .formatNumber(d3.format(".g")) 
    .valueAccessor(function(d) { return d; }); 

업데이트 바이올린 : http://jsfiddle.net/gordonwoodhull/6apx1rk1/3/