dc.js带顺序x轴刻度的条形图不能正确呈现

问题描述

我最近发现了dc.js，并试图使用d3.js网站上提供的条形图示例来实现一个简单的条形图：。

I've recently discovered dc.js and have been trying to implement a simple bar chart using the bar chart example provided on d3.js's website: http://bl.ocks.org/mbostock/3885304.

但是，作为dc.js实现的一部分，需要一个crossfilter维度和组。

However, as part of dc.js implementation, a crossfilter dimension and group is required.

一个简单的字母和频率的TSV文件，我改变了一些代码看起来如下：

So using a simple TSV file with "letters" and "frequencies", I've changed the code a bit to look as follows:

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返回频率，我设置我的xAxis缩放到序数与数据集中的所有字母域，我得到一个渲染的条形图，几乎所有的x轴值（A - Y）在零点和一个x轴值Z）在x轴线的末端。

I'm a little confused about what I should be setting the valueAccessor to (on my bar chart), because when I set the valueAccessor to return "frequency", and I set my xAxis scale to ordinal with a domain of all "letters" in the data set, I get a rendered bar graph with almost all x-axis values ("A - Y") at the ZERO point and one x-axis value (i.e. "Z") at the end of the x-axis line.

我已经尝试设置范围，但它似乎没有做的伎俩。

I've tried setting the ranges, but it doesn't seem to do the trick. Any ideas on what I'm misunderstanding would be greatly appreciated!

推荐答案

结果我必须将.xUnits属性设置为dc .units.ordinal（），以获得正确间隔的x轴！

Turns out I had to set the .xUnits property to dc.units.ordinal() in order to get the x-axis spaced out correctly!

这篇关于dc.js带顺序x轴刻度的条形图不能正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！