Ajouter des étiquettes à un graphique à barres d3

Question

J'ai un graphique à barres d3 pour lequel j'extrait des données de Firebase.Je veux ajouter les étiquettes à l'axe des x.Voici le code de mon 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 est le simple décompte des occurrences et il est affiché sur l’axe des x.Je souhaite que les noms stockés dans la variable magLabel soient affichés sous les décomptes.Merci.

Answer 1

Pour référence:dans les commentaires sur la réponse @bencripps, le PO parle d'utiliser xAxis.tickValues(['One','two','three','four','five','six','seven']).

tickValues c'est en fait si vous souhaitez spécifier des graduations personnalisées dans l'échelle que vous utilisez.À l'heure actuelle, vous utilisez une échelle linéaire :

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

il s'attend donc à ce que vos valeurs de ticks soient des points sur cette échelle où il peut dessiner des ticks.Si tu avais quelque chose qui ressemble plus à xAxis.tickValues([1, 2, 3, 4, 5, 6, 7]), ça devrait marcher.

Cependant, il semble que vous ne souhaitiez pas réellement une échelle linéaire.d3 a également d'autres types de gammes, et il semble que celle que vous voulez soit une Échelle ordinaire.Les échelles ordinales sont les échelles auxquelles vous pensez généralement pour les graphiques à barres ;il s'agit d'un type d'échelle qui a un domaine discret.Dans ce cas, vous pouvez essayer de modifier votre échelle comme suit :

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

il utilise donc une échelle ordinale à la place.Puisque vous utilisez dc.js, vous devrez également spécifier

.xUnits(dc.units.ordinal)

afin qu'il sache utiliser des marques ordinales.

Answer 2

Voici un code simple pour ajouter un axe x;Vous devrez jouer avec le domaine et la gamme pour obtenir la longueur souhaitée et le nombre de ticks.

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

note , le .call(xAxis) est ce qui est en réalité ajouté à l'axe X à votre graphique.