用于从错误组中删除气泡图的dc.js分组
我正在尝试使用dc.js创建一个气泡图，它将为每个数据行创建一个气泡图，并将被同一页上的其他图表过滤。最初的气泡图是正确创建的，但是当从另一个图表中筛选项目并从组中添加或删除项目时，它们看起来像是应用到了错误的组中。我不确定我在分组或维度上搞乱了什么。我已经创建了一个example fiddle here
这里有一个简单的饼图来过滤filterColumn，一个气泡图使用identifer1、一个唯一的字段作为维度，xVal、yVal和rVal来显示数据，还有一个dataTable来显示当前记录。
我已经尝试了其他自定义组函数，但切换到FAQ中的示例仍然存在问题。
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; })...；
回答 1
Stack Overflow用户
发布于 2018-05-31 18:31:25
这是一个令人沮丧的调试过程。您的分组和缩减都很好，这是为每一行绘制一个气泡的最佳方法，使用这样的唯一标识符。
这是恼人的，你必须指定一个复杂的缩减，当值将是原始值或0，但替代方案并不是很好。
减价令人抓狂。当然不只是原始值和零，有些会转到其他值，更大或负，有时单击两次饼图切片甚至不会返回到原始状态。
我在reduce函数中设置了断点，并注意到，正如您所做的那样，这些值被从错误的组中删除。这怎么可能呢？最后，通过在饼图的filtered处理程序中记录bubbleChartGroup.all()，我注意到在第一次呈现后，组的顺序被打乱了！
您的代码很好。但是您在dc.js中发现了一个新的bug，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)。
希望在下一个版本中解决这个问题，但这个变通方法非常可靠，以防需要更长的时间。
https://stackoverflow.com/questions/50609432
复制相似问题