tutorial - javascript charts js examples

Uso de una escala ordinal(''d3.scale.ordinal'') para el eje x en un gráfico de barras

Question

Tengo una matriz de datos como esta:

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

Estoy usando:

• dc.js
• crossfilter.js
• d3.js

Quiero crear un gráfico de barras con:

• el eje x que tiene un nombre alfabético, y
• El eje y tiene número de apariciones del alfabeto.

Pregunta: ¿Cómo puedo trazar un gráfico de barras con una escala ordinal en el eje x?

Mi código:

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);

Finalmente, tengo otro problema que es que Alphabet_Type no tendrá valores predecibles. Así que necesito buscar los valores para Alphabet_Type través de crossfilter.js e incorporar esos valores al dominio. ¿Cómo puedo hacer esto?

Answer 1

Añadiendo

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

resuelve el problema.

Answer 2

Dos cosas:

1. Pase dc.units.ordinal como el parámetro a .xUnits() .
2. Pase una función de escala ordinal a .x() .

Esto es lo que quiero decir:

.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

Vea este JSFiddle: http://jsfiddle.net/reblace/tbamW/156/

Por alguna razón, no pude hacer que renderHorizontalGridLines() o renderVerticalGridLines() funcionen, pero el resto es bueno.