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/

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

1 个答案: