使用 dc.js 的工作 numberDisplay

Question

我正在尝试让 numberDisplay 与 pieChart 和 lineChart 一起工作。我做错了什么，但是什么？

请参阅http://jsfiddle.net/1nf3d8kc/3/ 获取以下代码。

我正在尝试在 numberDisplay 中显示金额。单击饼图时，数字应该会更新。

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;}),

数字显示的一个奇怪的怪癖是，即使它支持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; } );

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