Подтвердить что ты не робот

Используя порядковый масштаб ('d3.scale.ordinal') для оси x на гистограмме

У меня есть массив данных, подобный этому:

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 и включить эти значения в домен. Как я могу это сделать?

4b9b3361

Ответ 1

Две вещи:

Вот что я имею в виду:

.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(), но все остальное хорошо.

Ответ 2

Добавление

.x(d3.scale.ordinal().domain(data.map(function (d) {return d.Alphabet_Type; })))

решил проблему.