画笔滤镜在堆积条形图上表现不合理

Question

我在使用dc.js绘制堆积条形图时遇到了一个奇怪的过滤问题。通过刷图来选择过滤区域有时会在轴外开始选择（图b），或者只允许我在整数的步骤上选择画笔（即在图a和b中我只能选择例如范围2.0-3.0）和或2.0-4.0等）。在子整数x轴刻度上，没有看到刷牙选择。

基本上

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

对于图b，缩小函数产生如下结构：

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

绘制图表的基本代码如下。

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();
};

我到底错在了什么？这是否必须使用keyAccessor函数，我目前在代码中没有这个函数？为什么这些图表上有一个双宽度的y轴线？

Answer 1

答案结果相当简单。代码包含

.round(Math.floor)

导致刷过滤问题。双宽度的y轴线仍然是个谜。