首页 文章

dc.js / d3.js - 如果条形图值等于零,如何隐藏条形图x轴类别值?

提问于
浏览
2

我知道之前已经问过这个问题,但我找不到适合我的答案 .

我查看https://github.com/dc-js/dc.js/wiki/FAQ#filter-the-data-before-its-charted并尝试了 remove_empty_bins 函数,但没有任何改变 . 我也尝试了 filter_bins 函数,但我收到错误消息"f is not a function" .

我正在制作仪表板 . 我希望条形图能够更新,以便在它们为零时从图形中删除x轴类别,并在它们不存在时重新出现 . 在其他图形中选择/取消选择元素时,图形会更新 .

基本上,我不希望我的20个类别x轴显示所有这些,当只有3个(例如)有另一个图表选择了一个元素时的值 . 我想只显示那些3(例如) . 我不希望以无法撤消更改的方式更新数据,因为我希望能够从之前取消选择该元素并使图形返回其先前的状态 .

换句话说,更新条形图时,它应仅显示值大于0的条形图 .

Is there an example somewhere that shows how to do this? 我找不到一个 .

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

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);
});

1 回答

相关问题