D3 Examples - Top5 row chart bug

Top5 row chart bug

This is a bug in the capMixin for dc.js v2.1.2. Notice that the full chart has 20 rows. The TOP 5 rows by value are rows, 16 - 20. But when the row chart uses the .cap method of the capMixin, the BOTTOM 5 rows are displayed instead of the TOP 5 rows.

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css" />
  <script src="https://dc-js.github.io/dc.js/js/d3.js"></script>
  <script src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
  <script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/crossfilter/reductio/reductio.js"></script>
  <script src="https://npmcdn.com/universe@latest/universe.js"></script>
  <style>
  </style>
</head>
​
<body>
    <div>
    
    <div id="full-twenty">
        <p>  </p>
    </div>
    
    <div id="top-five">
        <p> Capped chart shows the BOTTOM 5 rows, rows 1-5. THIS IS NOT THE EXPECTED BEHAVIOUR.</p>
    </div>
  </div>
  
  <script>
    var topFive = dc.rowChart("#top-five");
    var fullTwenty = dc.rowChart("#full-twenty");
    
    d3.csv("Feature_weight.csv", function(error, experiments) {
​
      experiments.forEach(function(x) {
        x.Speed = +x.Speed;
      });
​
      var ndx                 = crossfilter(experiments),
          runDimension        = ndx.dimension(function(d) {return +d.Run;}),
          speedSumGroup       = runDimension.group().reduceSum(function(d) {
            return d.Speed * d.Run / 1000;
          });
      
      topFive
        .dimension(runDimension)
        .group(speedSumGroup)
        .width(384)
        .height(250)
                //.fixedBarHeight(10)
                .gap(4)
        .elasticX(false)
        .ordering(function(d){ return -d.value })
        // REMARK OUT THE NEXT TWO LINES FOR FULL CHART.
        .cap(5)
        .othersGrouper(false);
                
      topFive.render();
      
      fullTwenty
        .dimension(runDimension)
        .group(speedSumGroup)
        .width(384)
        .height(250)
                //.fixedBarHeight(10)
        .elasticX(false)
                .gap(4)
        .ordering(function(d){ return -d.value });
        // REMARK OUT THE NEXT TWO LINES FOR FULL CHART.
        //.cap(5)
        //.othersGrouper(false);
                
      fullTwenty.render();
      
    });
​
  </script>
</body>
​
    