javascript - 对条形图中的 x 轴使用序数刻度 ('d3.scale.ordinal' )

Question

我有一个这样的数据数组:

var data = [{"Alphabet_Type":"a"}, {"Alphabet_Type":"b"}, {"Alphabet_Type":"a"}];

我在用:

dc.js

crossfilter.js

d3.js

我想创建一个 条形图 和:

具有字母名称的 x 轴和

y 轴出现字母的次数。

问题:如何使用 绘制条形图序数尺度在 x 轴上？

我的代码:

var data = [{"Alphabet_Type":"a"}, {"Alphabet_Type":"b"}, {"Alphabet_Type":"a"}];

var Filter = crossfilter(data);
var Dimension = Filter.dimension(function (d) { return d.Alphabet_Type; });
var Group = Dimension.group();

dc.barChart("#bar-chart")
    .width(800) 
    .height(275) 
    .transitionDuration(0) 
    .margins({ top: 10, right: 50, bottom: 30, left: 40 })
    .dimension(Dimension) 
    .group(Group) 
    .elasticY(false)
    .elasticX(false)
    .x(d3.scale.linear().domain([-1, 10]))
    .y(d3.scale.linear().domain([0, 5]))
    .centerBar(true)
    .renderHorizontalGridLines(true)
    .renderVerticalGridLines(true)
    .brushOn(false);

最后，我还有一个问题是 Alphabet_Type不会有可预测的值。所以我需要获取 Alphabet_Type 的值通过 crossfilter.js 并将这些值合并到域中。我怎样才能做到这一点？

Answer 1

两件事情:

通 dc.units.ordinal 作为 .xUnits() 的参数.

通过 序数尺度函数到 .x() .

这就是我的意思:

.x(d3.scale.ordinal().domain(["", "a", "b", "c"])) // Need empty val to offset first value
.xUnits(dc.units.ordinal) // Tell dc.js that we're using an ordinal x-axis

请参阅此 JSFiddle: http://jsfiddle.net/reblace/tbamW/156/

由于某种原因，我无法获得 renderHorizontalGridLines() 或 renderVerticalGridLines() 工作，但其余的都很好。