Agregar etiquetas a un gráfico de barras d3

Question

Tengo un gráfico de barras d3 para el cual extraigo datos de Firebase.Quiero agregar las etiquetas al eje x.Aquí está el código de mi gráfico de barras:

new Firebase('https://exampl.firebaseIO.com/example').on('value', function (snapshot) {
    var lst = [];
    snapshot.forEach(function(childSnapshot) {lst.push(childSnapshot.val());});
    var magValue = new crossfilter(lst).dimension(function (d) {return d.count;});
    var magLabel = new crossfilter(lst).dimension(function (d) {return d.Owner;});

    dc.barChart("#dc-magnitude-chart")
        .width(480)
        .height(150)
        .margins({top: 10, right: 10, bottom: 20, left: 40})
        .dimension(magValue)    // the values across the x axis
        .group(magValue.group().reduceSum(function(d) {return d.count;}))                            // the values on the y axis
        .transitionDuration(500)
        .centerBar(true)    
        .gap(56)       // bar width Keep increasing to get right then back off.
        .x(d3.scale.linear().domain([0.5, 7.5]))
        .elasticY(true)
        .xAxis().tickFormat(function(v) {return v;}); 
    dc.renderAll();

    });

magValue es el recuento simple de ocurrencias y se muestra en el eje x.Quiero que los nombres almacenados en la variable magLabel se muestren debajo de los recuentos.Gracias.

Answer 1

Para referencia:en los comentarios sobre la respuesta de @bencripps, el OP habla sobre el uso xAxis.tickValues(['One','two','three','four','five','six','seven']).

tickValues es en realidad si desea especificar ticks personalizados dentro de la escala que está utilizando.Ahora mismo estás usando una escala lineal:

.x(d3.scale.linear().domain([0.5, 7.5]))

por lo que espera que los valores de sus ticks sean puntos en esa escala donde pueda dibujar ticks.Si tuvieras algo más como xAxis.tickValues([1, 2, 3, 4, 5, 6, 7]), deberia de funcionar.

Sin embargo, parece que en realidad no quieres una escala lineal.d3 también tiene otros tipos de escala, y parece que la que quieres es una Escala ordinal.Las escalas ordinales son las escalas que normalmente se consideran para los gráficos de barras;son un tipo de escala que tiene un dominio discreto.En este caso, podrías intentar cambiar tu escala a algo como:

.x(d3.scale.ordinal().domain(['One','two','three','four','five','six','seven']))

por lo que utiliza una escala ordinal.Dado que está utilizando dc.js, también deberá especificar

.xUnits(dc.units.ordinal)

para que sepa utilizar las marcas ordinales.

Answer 2

Aquí hay algún código simple para agregar un eje X;Tendrá que jugar con el dominio y el rango para obtener la longitud deseada, y el número de garrapatas.

var XaxisScale = d3.scale.linear()
    .domain([0,150]) //you will have to set the domain, not sure what you want
    .range([0, magValue.length)

var xAxis = d3.svg.axis()
    .scale(XaxisScale)
    .ticks( magValue.length ) // this you will need to set as well

var xAxisGroup = $('"#dc-magnitude-chart').append("g")
    .attr('class', 'axis')
    .attr('transform', 'translate(5,8)')
    .call(xAxis);

nota , el código .call(xAxis) es lo que realmente está anexando el eje X a su tabla.