dc.js / d3.js - 如果条形图的条形值为零，如何隐藏条形图的 x 轴类别值？

Question

我知道以前有人问过这个问题，但我还没有找到适合我的答案。

我查看了https://github.com/dc-js/dc.js/wiki/FAQ#filter-the-data-before-its-charted并尝试了remove_empty_bins功能，但没有任何改变。 我还尝试了filter_bins函数，但收到错误消息“f 不是函数”。

我在仪表板上工作。 我希望条形图更新，以便 x 轴类别在为零时从图表中删除，并在零时重新出现。 在其他图表中选择/取消选择元素时更新图形。

基本上，我不希望我的 20 多个类别的 x 轴在只有 3 个（例如）在另一个图形选择了元素时具有值时显示所有这些。 我只想显示这 3 个（例如）。 我不想以无法撤消更改的方式更新数据，因为我希望能够从之前取消选择元素并使图形返回到以前的状态。

换句话说，当条形图更新时，它应该只显示值大于 0 的条形。

有没有一个例子说明如何做到这一点？ 我一直没能找到一个。

这是获取错误消息的代码：

var ndx = crossfilter(data);
var bar = dc.barChart("#bar");
var bar_dim = ndx.dimension(function(d) {return d.name;});
var bar_group = bar_dim.group().reduceSum(function(d) {return +d.count;});
var bar_Fgroup = filter_bins(bar_group);
bar.width(650).height(310)
    .dimension(bar_dim)
    .group(bar_Fgroup)
    .renderHorizontalGridLines(true)
    .gap(2)
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .elasticY(true)
    .yAxisLabel("count")
    .margins({top:10,left:60,right:10,bottom:110});

bar.on("renderlet",function(_chart){
    _chart.selectAll("g.x text").style("text-anchor","end")
          .attr('dx', '-15').attr('dy', '-2').attr('transform', "rotate(-75)");
    _chart.selectAll("rect.bar").on("click", _chart.onClick);
});

Answer 1

我猜你可能错过了elasticX ：

.elasticX(true)

这并不完全显而易见，除非您认为每次过滤器更新时都会强制更新 X 域。

我在这里添加了一个例子： http : //dc-js.github.io/dc.js/examples/filtering-removing.html