如何隐藏一个条形图的x轴类别值,如果它的条形值等于零

dc.js / How to hide a bar chart x-axis category value if its bar value equals zero?

本文关键字:何隐藏 如果 等于零 隐藏 一个 条形图      更新时间:2023-09-26

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

我查看了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);
});

我想你可能错过了elasticX:

.elasticX(true)

这不是很明显,除非你认为它每次过滤器更新时都强制更新X域。

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