首页 > 解决方案 > 如何动态更改条形图中的 bin 大小(dc.js)?

问题描述

所以我多次调用下面的代码,但问题是条形图箱大小被卡在我放置的第一个数据上,一切都在改变,但不是箱大小。

barChart
        .width(1080)
        .height(138)
        .margins({top: 10, right: 10, bottom: 20, left: 50})
        .dimension(key_map[$(this).text()].Dim)
        .group(key_map[$(this).text()].Group)
        .colors(['#6baed6'])
        .x(d3.scale.ordinal().domain(key_map[$(this).text()].Dim)) 
        .xUnits(dc.units.ordinal)
        .elasticY(true)
        .yAxis().ticks(4);

    barChart.elasticX(true).filterAll();dc.redrawAll(); 

标签: dc.jscrossfilter

解决方案


感谢@Gordon,我终于弄明白了。

即使我在打电话,键的数组也被忽略了elasticX(true);所以我最终打电话chart.focus([all_the_keys_from_the group]);,现在它工作得很好。

barChart
    .dimension(key_map[$(this).text()].Dim)
    .group(key_map[$(this).text()].Group)
    .x(d3.scale.ordinal().domain(key_map[$(this).text()].Dim)) 
    .xUnits(dc.units.ordinal)
    .elasticX(true);
    var focus_keys = [];

    key_map[$(this).text()].Group.all().forEach(element => {
        focus_keys.push(element.key);
    });

    barChart.focus(focus_keys);
    barChart.filterAll(); dc.redrawAll(); 

推荐阅读