web-dev-qa-db-fra.com

Taille de tick personnalisée sur l’axe (d3js)

Je crée un svg x-y-chart dans d3.js. Est-il possible de créer des ticks de différentes longueurs en fonction de tickValue?

J'ai créé ma propre fonction tickFormat myTickFormat et je l'utilise dans .tickFormat([format]). Cela fonctionne bien car [format] est censé être une fonction. Mais il n’est pas possible de faire la même chose avec .innerTickSize([size]), qui attend un nombre. 

Par exemple. si je veux que le tick à la valeur 70 soit plus long, je veux faire quelque chose comme ceci:

var myTickSize = function(d) {
    if (d === 70) { return 20;}
    return 6;
};

Mais quand j'utilise myTickSize comme argument de .innerTickSize():

var yScale = d3.scale.linear();
var yAxis = d3.svg.axis()
               .scale(yScale).orient("left")
               .innerTickSize(myTickSize);

J'obtiens un Erreur: Valeur non valide pour l'attribut x2 = "NaN" erreur pour chaque tick.

javascriptsvgd3.js
10
swenedo

La fonction tickSize ne peut accepter qu'un nombre en tant qu'argument, pas une fonction, mais il existe d'autres solutions.

L'approche la plus facile? Une fois l’axe dessiné, sélectionnez toutes les lignes de graduation et redimensionnez-les en fonction de leur valeur. Rappelez-vous simplement que vous devrez le faire après chaque redessinage des axes.

Exemple:
https://jsfiddle.net/zUj3E/1/

Code clé:

d3.selectAll("g.y.axis g.tick line")
    .attr("x2", function(d){
    //d for the tick line is the value
    //of that tick 
    //(a number between 0 and 1, in this case)
       if ( (10*d)%2 ) //if it's an even multiple of 10%
           return 10;
       else
           return 4;
    });

Notez que les graduations sur les valeurs max et min sont également dessinées dans le même <path> que la ligne d'axe. Par conséquent, les raccourcir n'a pas beaucoup d'effet. Si vous n'aimez pas ce manque de contrôle, déclarez que les ticks "externes" ont une longueur nulle lorsque vous configurez l'axe. Cela désactive les coins du chemin, mais les ticks externes auront toujours des lignes que vous pouvez contrôler de la même manière que les autres ticks:

var axis = d3.svg.axis()
    .tickSize(10,0)

Exemple: https://jsfiddle.net/zUj3E/2/

Si cela ne fonctionne pas, recherchez des exemples de motifs de tiques majeurs/mineurs sur Google. Assurez-vous simplement que l'exemple que vous regardez utilise la version 3 de d3: quelques méthodes supplémentaires liées aux ticks ajoutées à la version 2 ne sont plus prises en charge. Voir ceci SO Q & A.

22
AmeliaBR

Variante sur la réponse qui convient à mes besoins. J'ai choisi les valeurs pour lesquelles je voulais juste des graduations au lieu de ticks et de valeur, a ajouté la classe "hide" Mais cela peut être utilisé pour toute variation sur le thème.

            var gy = humiditySVG.append( "g" )
                .attr( "class", "y axis" )
                .attr( "transform", "translate(" + 154 + "," + 0 + ")" )
                .call( yAxis );

            humiditySVG.selectAll( "text" )
                .attr( "class", function ( d ) {
                                           if ( $.inArray(d, [0,50,100])==-1  ) {
                               return "hide";
                           }
                           return;
                       } );
            humiditySVG.selectAll( "line" )
                .attr( "x2", function ( d ) {
                           if ( $.inArray(d, [0,50,100])==-1  ) {
                               return 1;
                           } else {
                               return 3;
                           }
                           return;
                       } );
0
MaxRocket