Aggiungi etichette a un grafico a barre D3

Question

Ho un barochart D3 per il quale tiro i dati da Firebase.Voglio aggiungere le etichette all'asse X.Ecco il codice del mio BarChart:

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 è il conteggio semplice dei verificarsi ed è diplayd sull'asse X.Voglio che i nomi che siano memorizzati nella variabile di Maglabel da visualizzare sotto i conteggi.Grazie.

Answer 1

Per riferimento: nei commenti sulla risposta @bencripps, l'OP parla dell'utilizzo di xAxis.tickValues(['One','two','three','four','five','six','seven']).

tickValues è in realtà se si desidera specificare le zecche personalizzate all'interno della scala che stai utilizzando. In questo momento, stai usando una scala lineare:

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

.

Quindi si aspetta che i tuoi valori di spunta siano punti su quella scala in cui può disegnare zecche. Se avessi qualcosa di più simile a xAxis.tickValues([1, 2, 3, 4, 5, 6, 7]), dovrebbe funzionare.

Tuttavia, sembra che tu non desideri effettivamente una scala lineare. D3 ha anche altri tipi di scala, e sembra che quello che desideri sia un scala ordinale . Le scale ordinali sono le scale che tipicamente pensano per i grafici a barre; Sono un tipo di scala che ha un dominio discreto. In questo caso, potresti provare a cambiare la tua scala a qualcosa come:

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

.

Quindi usa invece una scala ordinale. Dal momento che stai usando DC.JS, dovrai anche specificare

.xUnits(dc.units.ordinal)

.

In modo che sappia usare i marchi ordinali.

Answer 2

Ecco alcuni semplici codice per aggiungere un asse X;Dovrai giocherellare con il dominio e intervallo per ottenere la lunghezza desiderata e il numero di zecche.

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 , il .call(xAxis) è ciò che effettiva effettivamente l'asse x al tuo grafico.