工作號碼顯示與dc.js

Question

我試圖讓numberDisplay與pieChart和lineChart一起工作。我做錯了什麼，但是什麼？

請參閱http://jsfiddle.net/1nf3d8kc/3/獲取以下代碼。

我試圖在numberDisplay中顯示金額。當點擊pieChart時，該數字應該更新。

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()顯示日期圖表中的所有值，在這種情況下，你需要另一組的總和：

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

數顯示的奇怪怪癖即使其支持.value()方法the special groupAll object，它仍然期望將valueAccessor應用於返回值...其中doesn't make any sense因爲groupAll.value()不是有史以來返回一個鍵/值對。

所以你需要指定的身份訪問來得到這個工作：

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

更新小提琴：http://jsfiddle.net/gordonwoodhull/6apx1rk1/3/