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

凯西

我知道之前曾有人问过这个问题,但我找不到适合我的答案。

我调查了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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章