DC.JSヒストグラムで動的にフィルタリングされた範囲

Question

私の場合、DCダッシュボードで複数のヒストグラムで使用されるデータ範囲を動的に調整したい。例えば、グラフ 'cat'にフィルタを適用すると、グラフの「奥行き」の境界がelasticXフィーチャを使用して調整されることが期待されます。しかし、そうではありません。

フィルターを適用した後に、depthRangeとcatRangeを動的に調整する方法はありますか？事前に多くのご支援をいただき、ありがとうございます。

次のようにHTMLコードは次のように

<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> 

JSコードは次のとおりです。

//================================================================ 
    points = []; 
    for (var i = 1; i < 100; i++) { 
     points.push({ 
     Id: i, 
     Cat: Math.random()*120., 
     Depth: Math.random() * 6000. 
     }); 
    } 

    //================================================================ 
    var filter; 
    var depthDimension; 
    var catDimension; 
    var depthGrouping; 
    var catGrouping; 

    //----------------------------------- 
    filter = crossfilter(points); 

    // Threshold has to be put on dimension not on group 
    // to get last bin filled with thresholded values 
    // Compare with https://jsfiddle.net/PBrockmann/ma3wr55k/ 

    //----------------------------------- 
    depthRange = [0., 5000.]; 
    catRange=[0.,100.]; 
    depthBinWidth = 500.; 
    catBinWidth = 2.; 
    depthDimension = filter.dimension(function(d) { 
     // Threshold 
     var depthThresholded = d.Depth; 
     if (depthThresholded <= depthRange[0]) depthThresholded = depthRange[0]; 
     if (depthThresholded >= depthRange[1]) depthThresholded = depthRange[1] - depthBinWidth; 
     return depthBinWidth * Math.floor(depthThresholded/depthBinWidth); 
    }); 

    catDimension=filter.dimension(function(d){ 
     // Threshold 
     var catThresholded = d.Cat; 
     if (catThresholded <= catRange[0]) catThresholded = catRange[0]; 
     if (catThresholded >= depthRange[1]) catThresholded = catRange[1] - catBinWidth; 
     return catBinWidth * Math.floor(catThresholded/catBinWidth); 
    }); 

    catGrouping=catDimension.group(); 
    depthGrouping = depthDimension.group(); // by default reduceCount 

    //----------------------------------- 
    depthChart = dc.barChart("#chart-depth"); 
    catChart=dc.barChart("#chart-cat"); 
    dataTable = dc.dataTable("#dataTable"); 

    //----------------------------------- 
    depthChart 
     .width(380) 
     .height(200) 
     .margins({ 
     top: 10, 
     right: 20, 
     bottom: 30, 
     left: 30 
     }) 
     .centerBar(false) 
     .elasticY(true) 
     .elasticX(true) 
     .dimension(depthDimension) 
     .group(depthGrouping) 
     .x(d3.scale.linear().domain(depthRange)) 
     .xUnits(dc.units.fp.precision(depthBinWidth)) 
     .round(function(d) { 
     return depthBinWidth * Math.floor(d/depthBinWidth) 
     }) 
     .renderHorizontalGridLines(true); 

    xAxis_depthChart = depthChart.xAxis(); 
    xAxis_depthChart.tickFormat(d3.format("d")); 
    yAxis_depthChart = depthChart.yAxis(); 
    yAxis_depthChart.ticks(6).tickFormat(d3.format("d")).tickSubdivide(0); // tickSubdivide(0) should remove sub ticks but not 

    catChart 
     .width(380) 
     .height(200) 
     .margins({ 
     top: 10, 
     right: 20, 
     bottom: 30, 
     left: 30 
     }) 
     .centerBar(false) 
     .elasticY(true) 
     .elasticX(true) 
     .dimension(catDimension) 
     .group(catGrouping) 
     .x(d3.scale.linear().domain(catRange)) 
     .xUnits(dc.units.fp.precision(catBinWidth)) 
     .round(function(d) { 
     return catBinWidth * Math.floor(d/catBinWidth) 
     }) 
     .renderHorizontalGridLines(true); 




    //----------------------------------- 
    dataTable 
     .dimension(depthDimension) 
     .group(function(d) { 
     return d.Id + " " + d.Cat + " " + d.Depth; // Data table does not use crossfilter group but rather a closure as a grouping function 
     }) 
     .size(30); 

    //----------------------------------- 
    dc.renderAll(); 

Answer 1

私はあなたがelasticX(true)に加えて、ここで探しているものだと思い、ビンが空のときにビンを取り除く能力です。

CrossFilterは、今も0に集計されているビンについては値0を報告し、dc.jsはそれらを忠実にプロットします。ゼロを描くべきではないといつも思っているとは思わないので、空のビンを削除するためにcrossfilterとdc.jsの間でデータを前処理する必要があります。

in the FAQと記載されている最良の手法は、クロスフィルターグループをラップしてフィルタリングする「偽のグループ」を作成することです。

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))