允许使用 dc.js 刷序条形图

Question

我正在尝试使用 dc.js 创建一个在 x 轴上具有序数值的条形图，并在其上启用画笔。

画笔用于过滤其他图表，例如气泡图和折线图...我已经设法创建了所有图表，但主要问题是画笔无法根据所选内容过滤其他图表但其他图形可以用画笔过滤条形图。

我正在使用问题 brush on ordinal barchart dc.js

中的小提琴代码

Answer 1

感谢您提出这个问题。我在报价单上给出的解决方案不完整，我已经更新了。

只考虑了filterFunction的return值，用于显示画笔。它实际上并没有应用过滤器，这是 filterFunction!

的主要目的

需要进行两项更改。首先，我们需要检查过滤器数组是否为空，如果是，则清除维度的过滤器。其次，如果有维度，我们需要将生成的过滤器应用于维度。

所以不用

chart.filterHandler(function(dimension, filters) {
  return filters.map(function(rangefilt) {
    var low = keys[Math.ceil(rangefilt[0])], high = keys[Math.ceil(rangefilt[1])] || 'zzz';
    return dc.filters.RangedFilter(low,high);
  });
});

我们得到

kpiMoveChart.filterHandler(function(dimension, filters) {
    if(filters.length === 0) {
        dimension.filter(null);
        return filters;
    }
    // actually should only contain one filter but use .map as a convenience
    var filters2 = filters.map(function(rangefilt) {
        var low = keys[Math.ceil(rangefilt[0])], high = keys[Math.ceil(rangefilt[1])] || 'zzzz';
        return dc.filters.RangedFilter(low,high);
    });
    dimension.filterRange(filters2[0]);
    return filters2;
});

此外，您还有一个小错别字：keys[Math.ceil(rangefilt[1]) || 'zzzz'] 应该是 keys[Math.ceil(rangefilt[1])] || 'zzzz'

最后，在您的气泡图中，通常不需要覆盖 yAxisMin 和朋友来更改图表的域。如果你想修复域，关闭弹性并直接设置域会更优雅：

kpiBubbleChart
    .y(d3.scale.linear().domain([-10, 160]))

（覆盖 xAxisMin 和 xAxisMax 似乎没有任何效果，因为该比例是有序的，所以它总是会使用键列表。）

这是我对你的 fiddle 的叉子：https://jsfiddle.net/gordonwoodhull/g34Ldwaz/9/

允许使用 dc.js 刷序条形图

allow brush on ordinal bar chart using dc.js

crossfilter

dc.js