web-dev-qa-db-fra.com

D3 - utiliser des chaînes pour les ticks d'axe

Je souhaite créer un diagramme à barres en utilisant des chaînes comme étiquettes pour les graduations sur l'axe des x (par exemple, Année 1, Année 2, etc. au lieu de 0,1,2, etc.).

J'ai commencé par utiliser les valeurs numériques pour l'axe des x (par exemple, 0,1,2,3, etc.) comme suit:

1) Je génère mes gammes:

     x = d3.scale.ordinal()
        .domain(d3.range(svg.chartData[0].length)) //number of columns is a spreadsheet-like system
        .rangeRoundBands([0,width], .1); 


     y = d3.scale.linear()
        .domain(Math.min(d3.min(svg.chartData.extent),0), Math.max(d3.min(svg.chartData.extent),0)]) 
        .range([height, 0])
        .Nice();

2) faire les axes:

     d3.svg.axis()
        .scale(x);

3) Redessiner les axes:

     svg.select(".axis.x_axis")
        .call(make_x_axis().orient("bottom").tickSubdivide(1).tickSize(6, 3, 0));

Cela fonctionne bien avec les étiquettes d'axe numériques par défaut.

Si j'essaie d'utiliser un tableau de chaînes pour les valeurs x tickValues ​​comme ceci ....

     d3.svg.axis()
        .scale(x).tickValues(svg.pointsNames); //svg.pointsNames = ["Year 1", "year 2", etc.]

... lorsque je redessine le graphique (avec ou sans modifications des données/paramètres), les étiquettes sont permutées comme ceci.

enter image description hereenter image description here

Remarquez comment Col 1 prend la place de Col 0 et inversement.

Savez-vous pourquoi cela se produit?

javascriptd3.js
20
Gian

Mettre à jour 

Il suffit de trier le svg.pointsNames avant de l'appliquer en tant que tickValues. Assurez-vous de les trier exactement de la même manière que vos données. Ainsi, un mappage one-one est toujours maintenu entre vos étiquettes et vos valeurs de tick. 

Aussi, si vous me le permettez, consultez la fonction tickFormat` ici. Cela me semble une meilleure option.

//Tick format example
chart,xAxis.tickFormat(function(d, i){
    return "Year" + d //"Year1 Year2, etc depending on the tick value - 0,1,2,3,4"
})
20
Jibi Abraham

Merci pour cela ... J'ai utilisé cette fonction avec une clause if intégrée pour gérer une série d'axes x différente avec des noms au lieu de nombres. 

Le tableau de factions se compose de tous les noms pertinents triés par les index de la série, qui viennent ensuite être mis en correspondance avec son index correspondant dans les données. 

xAxis = d3.svg.axis().scale(xScale)
            .tickFormat(function(d) { 

                if(seriesX == 'seriesValue'){ 
                    return factions[d]}

                else{ 
                    return d}
            })    
         .orient("bottom");
0
stinglsa