DC.js，crossfilter - 隐藏 0-value-bins / 组时的动态图表高度答案

【问题标题】：DC.js, crossfilter - dynamic chart height when hiding 0-value-bins / groupsDC.js，crossfilter - 隐藏 0-value-bins / 组时的动态图表高度
【发布时间】：2020-10-24 08:56:23
【问题描述】：

我想动态设置包含隐藏箱的 DC 图的高度。

可以使用 remove_empty_bins() 函数在 DC 图表中隐藏零值箱 - 请参阅以下帖子： How can hide dc.js row chart values if values equal zero

我创建了一个组“SubCategoryGroup_nonEmpty”，它只包含非空箱。但是现在我的图表高度不适应非空箱的数量。

我尝试使用以下代码设置 .height()：

SubcategoryRowChart
    .dimension(SubCategoryDim)
    .group(SubCategoryGroup_nonEmpty)
    .elasticX(true)
    .valueAccessor(function(p) { return p.value.count > 0 ? p.value.total / p.value.count : 0; })
    ...
    .height(function(anchor) {
        // calculate the height depending on the count of not-hidden bins
        return SubCategoryDim.group().size() * 40; // 40 = size of single element including padding
     });

但是使用 SubCategoryDim.group().size() 我只能得到总箱，而不是过滤的箱：

如何获取过滤后的 bin 数量？

【问题讨论】：

虽然可以通过函数来设置高度，但是函数只调用一次，值被缓存。您还需要在重新绘制图表时设置高度，您可以通过处理preRedraw 事件来完成。获取已过滤箱数的最简单方法是nonEmpty.all().length

标签： javascript dynamic height dc.js crossfilter

【解决方案1】：

戈登 - 你是我的救星！非常感谢！ :)

这是我的最终解决方案：

使用 nonEmptyGroup.all().length 获取过滤后的 bin 计数
创建函数CalcRowChartHeight_bySingleRowHeight()，根据箱数、行高和边距计算行高

    function CalcRowChartHeight_bySingleRowHeight(chart, group, SingleRowHeight){
        var ChartHeight = group.all().length * SingleRowHeight;
        var ChartMargins = chart.margins().top + chart.margins().bottom;
        var Height = ChartHeight + ChartMargins
        return Height;
    }

覆盖设置height 的redraw() 函数。 _redraw() 函数是 redraw() 的副本。我使用它是因为我没有弄清楚在这种情况下如何使用 preRedraw 事件。有什么想法吗？

SubCategoryRowChart
    .dimension(SubCategoryDim)
    .group(SubCategoryGroup_nonEmpty)
    .elasticX(true)
    ...
    .redraw = function (){
        // calculate the height based on the count of non-hidden bins
        SubCategoryRowChart.height(CalcRowChartHeight_bySingleRowHeight(SubCategoryRowChart, SubCategoryGroup_nonEmpty, 40))
        return SubCategoryRowChart._redraw();
    }
    ;

【讨论】：