Brush filter behaves irrationally on stacked bar chart

问题

I'm seeing a weird filtering issue in using dc.js to draw stacked bar charts. Selecting a filtering area by brushing the chart sometimes starts the selection outside of the axis (figure b), or only lets me select the brush on steps that are integers (i.e. in figure a&b I can only select for example range 2.0-3.0 and or 2.0-4.0 etc). On sub-integer x-axis scales no brushing selection is seen.

Basically

scope.datasetNames = ['DATASET1','DATASET2', 'DATASET3];

For figure b the reducing functions produce a structure like:

JSON.stringify( reducedGroup.all()[10] )
"{"key":2.6550000000000002,"value":{"sums":{"DATASET1":54.379999999999995,"DATASET2":43.38,"DATASET3":76.56000000000002},"counts":{"DATASET1":20,"DATASET2":16,"DATASET3":28},"dataset":"DATASET3","sampleid":"ID3225"}}"

The essential code for drawing the chart is below.

var createSVG = function( scope, element, dimension, reducedGroup, variable, noBins, extent, binWidth, colorMap ) {
  scope.width = 470;
  scope.height = 345;
  scope.histogram = dc.barChart( element[0] );
  scope.histogram
  .width(scope.width)
  .height(scope.height)
  .xUnits( function() { return 20; } )
  .margins({top: 15, right: 10, bottom: 20, left: 40})
  .dimension(dimension);

  _.each( scope.datasetNames, function(name,ind) {
    if( ind === 0 )
    {
      scope.histogram
      .group(reducedGroup, name)
      .valueAccessor( function(d) {
        if( _.isUndefined( d.value.dataset ) ) {
          return 0;
        }
        return d.value.counts[name];
      });
    }
    else {
      scope.histogram
      .stack( reducedGroup, name, function(d) {
        if( _.isUndefined( d.value.dataset ) ) {
          return 0;
        }
        return d.value.counts[name];
      });
    }
  });

  scope.histogram.round(Math.floor)
  .centerBar(false)
  .x(d3.scale.linear().domain(extent).range([0,noBins]))
  .elasticY(true)
  .brushOn(true)      
  .xAxis().ticks(7).tickFormat( d3.format(".2s") );

  scope.histogram.render();
};

What exactly am I doing wrong here? Does this have to do something with keyAccessor function, which I currently don't have in the code? And why is there a double-width y-axis line on these charts?

回答1:

The answer turned out to be rather simple. The code contained

.round(Math.floor)

which caused the brush filter problem. The double-width y-axis line remains a mystery.

来源：https://stackoverflow.com/questions/20443008/brush-filter-behaves-irrationally-on-stacked-bar-chart

标签

crossfilter

dc.js