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?

问题描述

我知道这个问题以前被问过，但我还没有找到一个对我有效的答案。

I know this question has been asked before, but I have not found an answer that works for me.

我调查了 https://github.com/dc-js/dc.js / wiki / FAQ＃filter-the-data-before-its-charted 并尝试了 remove_empty_bins 函数，但没有什么改变。我也尝试过 filter_bins 函数，但我得到错误信息f不是一个函数。

I looked into https://github.com/dc-js/dc.js/wiki/FAQ#filter-the-data-before-its-charted and tried the remove_empty_bins function but nothing changed. I also tried the filter_bins function but I am getting the error message "f is not a function".

我在仪表板上工作。我想要更新条形图，使得x轴类别在它们为零时从图中移除，并且当它们不是时将重新出现。在其他图表中选择/取消选择元素时，将更新图表。

I am working on a dashboard. I want the bar charts to update such that the x-axis categories are removed from the graph when they are zero and will reappear when they are not. The graphs are updated when selecting/unselecting elements in other graphs.

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

Basically, I don't want my 20+ categories x-axis to show all of them when only 3 (for example) have values when another graph has an element selected. I would like only those 3 (for example) to be shown. I don't want to update the data in a way that I cannot undo the changes since I want to be able to unselect the element from before and have the graph return to its previous state.

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

In other words, when a bar chart is updated, it should only show the bars with values greater than 0.

这是得到错误信息的代码：

This is the code that is getting the error message:

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)

b $ b

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

which is not entirely obvious, except if you think of it forcing an update of the X domain each time the filters update.

此处的示例：
http：// dc-js .github.io / dc.js / examples / filtering-removal.html

这篇关于dc.js / d3.js - 如果条形图值等于零，如何隐藏条形图x轴类别值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！