javascript - 使用 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 条记录，甚至是逐场数据)并且您想要聚合数据并在不同维度上动态过滤的场景。