dc.js分组泡泡图从错误的组中删除

时间:2018-05-30 16:22:15

标签: dc.js

我正在尝试创建一个带有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; })

...     ;

1 个答案:

答案 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)

希望在下一个版本中修复此问题,但这种解决方法非常可靠,以防需要更长的时间。

Here is a fiddle demonstrating the workaround.