带有序数x轴刻度的dc.js条形图无法正确渲染

Question

我最近发现了dc.js并且一直在尝试使用d3.js网站上提供的条形图示例来实现一个简单的条形图:http://bl.ocks.org/mbostock/3885304 .

但是,作为dc.js实现的一部分,需要跨过滤器维度和组.

因此,使用带有"字母"和"频率"的简单TSV文件,我将代码更改为如下所示:

d3.tsv('testdata.tsv', function(error, data) {
  var cf = crossfilter(data);

  var dimension = cf.dimension(function(d){
    return d.letter;
  }

  var group = dimension.group().reduce(
    function(p,v){ 
      p.frequency += v.frequency
    }, 
    function(p,v){ 
      p.frequency -= v.frequency
    },
    function(){ 
      return { frequency: 0  };
  });

我有点困惑我应该将valueAccessor设置为(在我的条形图上),因为当我将valueAccessor设置为返回"frequency"时,我将xAxis缩放设置为带有所有"字母"的域的序数在数据集中,我得到一个渲染的条形图,其中ZERO点的几乎所有x轴值("A - Y")和x轴线末端的一个x轴值(即"Z") .

我已经尝试设置范围,但它似乎没有做到这一点.任何关于我误解的想法都将不胜感激!

Answer 1

事实证明我必须将.xUnits属性设置为dc.units.ordinal()才能使x轴正确间隔开!