带有序数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”） -axis line。

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

Answer 1

原来我必须将.xUnits属性设置为dc.units.ordinal（）才能使x轴正确间隔开来！