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

Question

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

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

我正在使用问题brush on ordinal barchart dc.js中的小提琴代码

Answer 1

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

它只考虑了filterFunction的返回值，它将用于显示画笔。它实际上并没有应用过滤器，这是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 似乎没有任何效果，因为该比例是有序的，所以它总是会使用键列表。）

这是我的小提琴叉：https://jsfiddle.net/gordonwoodhull/g34Ldwaz/9/