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

我正在尝试使用dc.js创建一些交互式饼图来表示篮球队的统计数据。一张饼图上显示每个球员的得分，另一张饼图上显示每个球员的工资等，作为球队总得分的一部分

我真的不明白如何使用交叉过滤器和函数。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();

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

---

谢谢你的帮助

我想就这样丢掉了

工薪族perplayer

：

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();

下面是一个很好的交叉过滤器教程：

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

---

我会问你为什么要使用交叉过滤器。所有数据都是预先聚合的，您只需要一个维度（player）。在这些图表上过滤是没有意义的。Crossfilter的设计更多的是针对这样的场景，即您有不聚合的数据（每个游戏中每个玩家可能有一条记录，甚至每个玩家都有一条记录），并且您希望聚合数据并在不同维度上动态过滤。

谢谢！你说得对，我想我不需要对这种数据集进行交叉过滤。我喜欢dc.js中的piegraphs，所以也许我会找到一种不使用交叉过滤器创建它们的方法。摆脱salaryGroupPerPlayer后，我仍然有一张空的图表。我想在再次尝试这一点之前，我必须认真考虑crossfilter、dc.js和mapreduce。感谢您的教程，我将对其进行介绍。dc.js只希望对象具有一些特定的属性/函数，这些属性/函数提供要传递给其dimension（）和group（）方法的数据。IIRC，维度对象需要

filter

、

filterExact

、

filterRange

和

filterFunction

方法，而组对象需要

all

方法（有时是

top

）。如果您只是向它们传递空对象，然后咨询错误控制台，它将告诉您缺少哪个方法。祝你好运我不认为在不需要的时候使用交叉过滤器有什么害处。它可能会慢一点，但你可能不会注意到。可视化的大部分成本是DOM元素，而不是计算。所以，除非你有理由不这么做，否则使用它可能会更容易。我明白你的意思。但是你看到代码有什么结构性问题吗？它仍然在输出一个空的饼图。它正在创建一个可视化，所以我们必须在正确的轨道上。@user5279393我同意Gordon的观点，使用交叉过滤器不会有什么坏处。尽管它的API和状态本身可能令人困惑。关于你的想象，我看不出有什么特别的错误。你能创建一个JSFIDLE并告诉我们这个问题吗？