Personnalisé tique de la taille de l'axe (d3js)

Je suis entrain de créer un svg x-y-graphique dans d3.js. Est-il possible de créer des tiques de différentes longueurs selon tickValue?

J'ai fait mon propre tickFormat fonction myTickFormat et l'utilisation qui en .tickFormat([format]) et qui fonctionne bien parce que [format] devrait être une fonction. Mais il n'est pas possible de faire la même chose avec .innerTickSize([size]), qui s'attend à un nombre.

E. g. si je veux la tique à la valeur de 70 à être plus 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 pour .innerTickSize():

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

- Je obtenir une Erreur: Invalid valeur pour l'attribut x2="NaN" d'erreur pour chaque tick.

OriginalL'auteur swenedo | 2014-02-05

  1. 22

    La tickSize fonction ne peut accepter un nombre comme argument, non pas une fonction, mais il y a d'autres solutions.

    L'approche la plus facile? Après l'axe est tracé, sélectionnez toutes les tiques lignes et de les redimensionner en fonction de leur valeur de données. N'oubliez pas que vous aurez à le faire après chaque axe se redessiner.

    Exemple:

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

    Code de la 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;
    });

    Noter que les marques de graduation sur les valeurs max et min sont également réalisés dans le cadre de la même <path> comme la ligne d'axe, de sorte que le raccourcissement entre eux n'ont pas beaucoup d'effet. Si vous n'aimez pas que l'absence de contrôle, de déclarer l ' "extérieur" les tiques ont une longueur égale à zéro lorsque vous configurez l'axe. Qui éteint les coins de la voie, mais l'extérieur tiques aura toujours des lignes que vous pouvez contrôler de la même manière que les autres tique lignes:

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

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

    Si cela ne fonctionne pas, google pour des exemples de majeure/mineure tique modèles. Assurez-vous de l'exemple, vous êtes à la recherche utilise d3 version 3: il y avait un peu plus de tiques liées méthodes ajoutées dans la version 2 qui ne sont plus pris en charge. De voir cette SI Q&A.

    .tickSize(10)

    OriginalL'auteur AmeliaBR

  2. 0

    Variante sur la réponse qui convient à mes besoins. Choisi les valeurs que je voulais juste les marques de graduation, au contraire, de tiques et de valeur, ajoutée le "cacher" de la classe. Mais ceci peut être utilisé pour une 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;
                       } );

    OriginalL'auteur MaxRocket