我正在尝试创建一个带有dc.js的气泡图表,每个数据行都会有一个气泡,并且会被同一页面上的其他图表过滤掉。初始气泡图是正确创建的,但是当从其他图表中过滤项目并在组中添加或删除项目时,它们看起来就像是应用于错误的组。我不确定我在分组或维度上搞砸了什么。我创建了example fiddle here
有一个简单的饼图来过滤 filterColumn ,一个使用 identifer1 的气泡图,一个唯一的字段,作为维度和 xVal , yVal 和 rVal 显示数据,dataTable显示当前记录。
我已经尝试过其他自定义组功能,但是从常见问题解答中切换到了示例,但仍然存在问题。
var
filterPieChart=dc.pieChart("#filterPieChart"),
bubbleChart = dc.bubbleChart('#bubbleChart'),
dataTable = dc.dataTable('#data-table');
var
bubbleChartDim=ndx.dimension(dc.pluck("identifier1")),
filterPieChartDim=ndx.dimension(dc.pluck("filterColumn")),
allDim = ndx.dimension(function(d) {return d;});
var filterPieChartGroup=filterPieChartDim.group().reduceCount();
function reduceFieldsAdd(fields) {
return function(p, v) {
fields.forEach(function(f) {
p[f] += 1*v[f];
});
return p;
};
}
function reduceFieldsRemove(fields) {
return function(p, v) {
fields.forEach(function(f) {
p[f] -= 1*v[f];
});
return p;
};
}
function reduceFieldsInitial(fields) {
return function() {
var ret = {};
fields.forEach(function(f) {
ret[f] = 0;
});
return ret;
};
}
var fieldsToReduce=['xVal', 'yVal', 'rVal'];
var bubbleChartGroup = bubbleChartDim.group().reduce(
reduceFieldsAdd(fieldsToReduce),
reduceFieldsRemove(fieldsToReduce),
reduceFieldsInitial(fieldsToReduce)
);
filterPieChart
.dimension(filterPieChartDim)
.group(filterPieChartGroup)
... ;
bubbleChart
.dimension(bubbleChartDim)
.group(bubbleChartGroup)
.keyAccessor(function (p) { return p.value.xVal; })
.valueAccessor(function (p) { return p.value.yVal; })
.radiusValueAccessor(function (p) { return p.value.rVal; })
... ;
答案 0 :(得分:0)
这是一个令人沮丧的调试。您的群组和缩减都很好,这是使用这样的唯一标识符为每行绘制一个气泡的最佳方式。
[令人讨厌的是你必须指定一个复杂的减少,当值为原始值或0时,但替代方案要好得多。]
减少是疯狂的。绝对不仅仅是原始值和零,有些会转到其他值,更大或更负,有时单击两次饼图片甚至不会返回到原始状态。
我在reduce函数中添加了断点,并且注意到,正如您所做的那样,值正从错误的组中删除。怎么会这样?最后,通过在饼图的bubbleChartGroup.all()
处理程序中记录filtered
,我注意到在第一次渲染后这些组出现了故障!
你的代码很好。但是您已经在dc.js which I filed here中发现了一个新的错误。
为了实现sortBubbleSize功能,我们对气泡进行排序。不幸的是,我们也正在对crossfilter的内部数组进行排序,这是我们信任的。 (group.all()
返回一个绝不能修改的内部数据结构。)
修复很容易;我们只需要在排序之前复制数组。您可以在代码中通过注释掉sortBubbleSize
来测试它,而不是提供data function,这就是它在内部的作用:
bubbleChart.data(function (group) {
var data = group.all().slice(0);
if (true) { // (_sortBubbleSize) {
// sort descending so smaller bubbles are on top
var radiusAccessor = bubbleChart.radiusValueAccessor();
data.sort(function (a, b) { return d3.descending(radiusAccessor(a), radiusAccessor(b)); });
}
return data;
});
请注意顶部的.slice(0)
。
希望在下一个版本中修复此问题,但这种解决方法非常可靠,以防需要更长的时间。