画笔过滤器在堆积的条形图上表现不合理 [英] Brush filter behaves irrationally on stacked bar chart

问题描述

在使用dc.js绘制堆叠的条形图时，我看到了一个奇怪的过滤问题。通过刷图表选择过滤区域有时会开始在轴外进行选择（图b），或者只能让我在整数步上选择刷（例如，在图a和b中，我只能选择范围2.0-3.0）和或2.0-4.0等）。在亚整数x轴刻度上，看不到任何笔刷选择。

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.

基本上

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

对于图b，归约函数产生如下结构：

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

我在这里到底在做什么错？这是否与keyAccessor函数有关，我目前代码中还没有？为什么在这些图表上有一条宽倍的y轴线？

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?

推荐答案

答案很简单。包含的代码

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

.round(Math.floor)

这导致了画笔过滤器问题。 y轴双倍宽度仍然是个谜。

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

这篇关于画笔过滤器在堆积的条形图上表现不合理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！