dc.js / d3.js - 如果条形图的条形值等于零,如何隐藏条形图 x 轴类别值?
dc.js / d3.js - How to hide a bar chart x-axis category value if its bar value equals zero?
我知道以前有人问过这个问题,但我还没有找到适合我的答案。
我查看了 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 轴类别在它们为零时从图中删除,而在它们不为零时重新出现。当其他图表中有 selecting/unselecting 个元素时,图表会更新。
基本上,我不希望我的 20 多个类别的 x 轴在只有 3 个(例如)有值时显示所有类别,而另一个图形选择了一个元素。我只想显示这 3 个(例如)。我不想以无法撤消更改的方式更新数据,因为我希望能够取消选择之前的元素并将图表 return 恢复到之前的状态。
换句话说,更新条形图时,它应该只显示值大于 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
我知道以前有人问过这个问题,但我还没有找到适合我的答案。
我查看了 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 轴类别在它们为零时从图中删除,而在它们不为零时重新出现。当其他图表中有 selecting/unselecting 个元素时,图表会更新。
基本上,我不希望我的 20 多个类别的 x 轴在只有 3 个(例如)有值时显示所有类别,而另一个图形选择了一个元素。我只想显示这 3 个(例如)。我不想以无法撤消更改的方式更新数据,因为我希望能够取消选择之前的元素并将图表 return 恢复到之前的状态。
换句话说,更新条形图时,它应该只显示值大于 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