使用 dc.js 创建一个简单的饼图

Question

我正在尝试使用 dc.js 创建一些交互式饼图来表示篮球队的统计数据。一个饼图将每个球员的分数、另一个他们的薪水等表示为球队总数的一部分。

我不太明白如何使用交叉过滤器.dimension() 和.group() 函数。 reduceSum() 真的需要在那里吗？我得到的只是一个空饼图。我见过的其他示例具有不同的结构化数据，不适用于这种情况。

下面是一些工资饼图的相关代码：

var data = [
{"player":"boomhauer", "rebound_avg":12.1, "salary":4000, "point_avg":15},
{"player":"bill", "rebound_avg":4.2, "salary":3000, "point_avg":20},
{"player":"hank", "rebound_avg":12.1, "salary":4000, "point_avg":15},
{"player":"dale", "rebound_avg":16.1, "salary":6000, "point_avg":4},
];

var ndx = crossfilter(data);
var playerDim = ndx.dimension(function(d) {return d.player;});  

var salaryPerPlayer = playerDim.group().reduceSum(function(d) {return d.salary;});

var salaryGroupPerPlayer = salaryPerPlayer.group(function(d) {return d.player; });

var salaryRingChart = dc.pieChart("#chart-ring-salary");

salaryRingChart
        .width(200)
        .height(200)
        .slicesCap(17)
        .innerRadius(10)
        .dimension(salaryPerPlayer)
        .group(salaryGroupPerPlayer)
        .renderLabel(true);


dc.renderAll();

我得到的只是一个空饼图。

感谢您的帮助！

Answer 1

我想只是丢了salaryGroupPerPlayer：

var data = [
{"player":"boomhauer", "rebound_avg":12.1, "salary":4000, "point_avg":15},
{"player":"bill", "rebound_avg":4.2, "salary":3000, "point_avg":20},
{"player":"hank", "rebound_avg":12.1, "salary":4000, "point_avg":15},
{"player":"dale", "rebound_avg":16.1, "salary":6000, "point_avg":4},
];

var ndx = crossfilter(data);
var playerDim = ndx.dimension(function(d) {return d.player;});  

var salaryPerPlayer = playerDim.group().reduceSum(function(d) {return d.salary;});

var salaryRingChart = dc.pieChart("#chart-ring-salary");

salaryRingChart
        .width(200)
        .height(200)
        .slicesCap(17)
        .innerRadius(10)
        .dimension(salaryPerPlayer)
        .group(salaryPerPlayer)
        .renderLabel(true);


dc.renderAll();

这里有一个很好的 Crossfilter 教程：http://blog.rusty.io/2012/09/17/crossfilter-tutorial/

reduceSum 是必要的，因为 Crossfilter 中组的默认聚合是计数。这只会计算每个玩家的记录数，即 1。所以，不是很有趣！

我会质疑你为什么要使用 Crossfilter。数据都是预先汇总的，您将只有 1 个维度（玩家）。过滤这些图表并没有真正的意义。 Crossfilter 更多地是为您拥有非聚合数据（可能每个游戏中的每个玩家有 1 条记录，甚至是逐个播放数据）并且您希望聚合数据并在不同维度上动态过滤的场景而设计的。