Question

我尝试使用dc.js创建一些交互式饼图来代表篮球队的统计数据。一个饼图会有每个玩家的积分，另一个是他们的薪水等，表示为团队总数的一部分。

我真的不懂如何使用crossfilter .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。数据都是预先聚合的，你只有一个维度（玩家）。过滤这些图表并没有多大意义。 Crossfilter更适用于您拥有分散数据的场景（每个游戏中每个玩家可能有1条记录，甚至是逐个播放数据），并且您希望聚合数据并在不同维度上动态过滤。

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

1 个答案: