我试图让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();
答案 0 :(得分:3)
我认为您的意思是要显示日期图表中所有值的总和,在这种情况下,您需要使用date.groupAll()
的其他组:
sumAllAmount = date.groupAll().reduceSum(function(d) {return d.data.amount;}),
数字显示的奇怪怪癖是即使它支持the special groupAll object的.value()
方法,它仍然希望将valueAccessor应用于返回的值... doesn't make any sense因为groupAll.value()
永远不会返回键/值对。
因此,您需要指定身份访问器才能使其正常工作:
numberDisplay.group(sumAllAmount)
.formatNumber(d3.format(".g"))
.valueAccessor( function(d) { return d; } );