首页 文章

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

提问于
浏览 次
1

我正在尝试使用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();

我得到的只是一张空饼图 .

谢谢你的帮助！

javascript d3.js data-visualization dc.js crossfilter

1 回答

  • 2

    我想失去 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条记录，甚至是逐个播放数据），您希望聚合数据并在不同维度上动态过滤 .

    回复于

相关问题