Comment modifions-nous les valeurs de tick générées par une échelle linéaire dans un tracé de ligne d3.js?

Les repères créés par un axe d3 peuvent être contrôlés de deux façons:

• En utilisant axis.tickValues(arrayOfValues) vous pouvez définir explicitement les valeurs que vous souhaitez afficher sur l'axe. Les tiques sont positionnées en passant chaque valeur à l'échelle associée, de sorte que les valeurs doivent être dans le domaine de votre échelle. Cela fonctionne pour n'importe quel type d'échelle, y compris les échelles ordinales, tant que les valeurs que vous donnez sont appropriées à cette échelle.

• Alternativement, à l'aide de axis.ticks(parameters) vous pouvez modifier la façon dont l'échelle calcule les points axis.ticks(parameters) . Les types de paramètres que vous pouvez utiliser dépendent du type d'échelle que vous utilisez: les valeurs que vous spécifiez seront transmises directement à la méthode .ticks() de la balance, afin de vérifier la documentation pour chaque type d'échelle. (Les paramètres seront ignorés pour les échelles ordinales, qui n'ont pas de méthode ticks() .)

  Pour les échelles linéaires, la méthode scale.ticks() accepte un nombre en tant que paramètre; La balance génère alors approximativement plusieurs tiques uniformément espacées dans le domaine avec des valeurs numériques rondes. Si vous ne spécifiez pas un nombre de ticks, la valeur par défaut est de créer environ 10 ticks, c'est pourquoi vous obteniez des tiques sur 0,5 intervalles lorsque votre domaine était de 0 à 5.

Alors, comment obtenez-vous le comportement souhaité (pas de valeurs de virgule décimale)?

• À l'aide de .tickValues() , vous créez un tableau de valeurs Y unique pour être vos ticks:

   var yValues = data.map(function(d){return dy;}); //array of all y-values yValues = d3.set(yValues).values(); //use a d3.set to eliminate duplicate values yAxis.tickValues( yValues ); 

  Soyez conscient que cette approche utilisera les valeurs y spécifiées, même si elles ne sont pas espacées de manière égale. Cela peut être utile (certains livres de visualisation de données suggèrent d'utiliser cette approche comme un moyen simple d'annoter votre graphique), mais certaines personnes pensent que votre graphique semble désordonné ou cassé.

• À l'aide de .ticks() , vous devriez déterminer l'étendue de votre domaine Y et définir le nombre de tiques afin que vous ne .ticks() pas de plus de marques, puis vous avez des nombres entiers disponibles sur votre domaine:

   var yDomain = yScale.domain(); yAxis.ticks( Math.min(10, (yDomain[1] - yDomain[0]) ); 

  Cela créera les valeurs par défaut (environ 10) pour les grands domaines, mais créera une case par valeur entière lorsque la différence entre le maximum et la min de votre domaine est inférieure à 10. (Bien que le nombre de ticks soit habituellement approximatif, l'échelle Préférez toujours des valeurs entières si cela correspond au nombre de tick spécifié.)