DC.JS直方图上的动态过滤范围

时间:2017-01-06 13:14:25

标签: dc.js crossfilter

在我的情况下,我想动态调整DC仪表板中多次直方图中使用的数据范围。在图表上应用过滤器' cat'例如,我希望图表的边界深度为'使用elasticX功能进行调整。但这种情况并非如此。

有没有办法在应用过滤器后动态调整depthRange和catRange?非常感谢您的支持。

HTML代码如下:

int sum = 0
for (int i = 1; math.abs(i) <= n; i = -math.signum(i)*(math.abs(i)+2)) {
        sum += i;
    }
system.out.println(sum)

JS代码如下:

<div id="chart-depth">
  <div>Depth</div>
  <a class="reset" href="javascript:depthChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
  <span class="reset" style="display: none;"><span class="filter"></span></span>
  <br>
  <br>
</div>

<div id="chart-cat">
  <div>Cat</div>
  <a class="reset" href="javascript:catChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
  <span class="reset" style="display: none;"><span class="filter"></span></span>
  <br>
  <br>
  </div>


<div id="dataTable" style="height: 300px;">
  <div class='header'>
    <span>Id</span>
    <span>Cat</span>
    <span>Depth</span>
  </div>
</div>

enter image description here

1 个答案:

答案 0 :(得分:0)

我认为除了elasticX(true)之外,你在这里寻找的是能够在空白时移除垃圾箱的能力。

Crossfilter仍会报告现在聚合为零的那些二进制值为零,而dc.js将忠实地绘制它们。我不认为我们总是假设不应该绘制零,因此我们需要在crossfilter和dc.js之间预处理数据以删除空箱。

记录in the FAQ的最佳技术是创建一个&#34;假组&#34;它包裹了crossfilter组并对其进行过滤。

function remove_empty_bins(source_group) {
    return {
        all:function () {
            return source_group.all().filter(function(d) {
                return d.value != 0;
            });
        }
    };
}

像这样使用它:

depthGroup.group(remove_empty_bins(depthGrouping))