d3 marques de graduation sur les nombres entiers

J'ai un d3 graphique à barres dont les valeurs vont de 0 à 3. Je voudrais de l'axe y pour afficher uniquement les valeurs de type entier, qui, je peux le faire par

var yAxis = d3.svg.axis().scale(y).orient("right").tickFormat(d3.format("d"));

Cependant, il y a encore des marques de graduation à la non-entier marques. Réglage de la tique format ne cache ces étiquettes. Je peux définir explicitement le nombre de tiques ou de la tique valeurs, mais ce que je voudrais faire est de simplement être en mesure de préciser que les graduations apparaissent uniquement à des valeurs entières. Est-ce possible?

Double Possible de Comment faire pour limiter d3.svg.axe d'étiquettes entières?

InformationsquelleAutor Jeff Storey | 2012-11-27

axis d3.js

15

Vous pourriez ajouter .les tiques(4) et .tickSubdivide(0) comme je l'ai fait ci-dessous:
```
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right")
    .ticks(4)
.tickFormat(d3.format("d"))
    .tickSubdivide(0);
```
- Malheureusement, ça ne semble pas fonctionner. J'ai ajouté une photo de ce à quoi il ressemble (je n'ai pas tickPadding 8, mais qui ne devrait pas d'importance). Ignorer le fait que le haut et le bas des étiquettes de coupure, je travaille toujours sur cette partie.
- .tickSubdivide(0) devrait faire l'affaire. Avez-vous des valeurs entières dans vos données? Vous pouvez essayer de faire de la d3.format("d") ou d3.format("f") le long de avec le .tickSubdivide. Assurez-vous également d'effacer le cache du navigateur. Il est exact que les .tickPadding est pas pertinente ici.
- Toutes les données sont des données entier, et j'ai essayé exactement comme vous l'avez ici, et il ressemble toujours l'image ci-dessus...
- En outre, il semble que le nombre de graduations est fixé à 10 par défaut, mais seulement de les montrer sur des entiers dans ce graphique ne ferait que montrer 4. Que cela pourrait-il avoir quelque chose à faire avec elle?
- Intéressant. Je n'ai pas eu ce problème avec 5-10 tiques, mais il est plus difficile de les supprimer lorsque vous avez moins de 5. Essayez d'ajouter .les tiques(4) j'ai édité ma réponse.
- Qui a fait le tour. J'ai changé de Mathématiques.min(maxHeight+1,ordonnée.les tiques()) donc, si le graphique de la hauteur est inférieur au nombre de tiques, il réduit le nombre de tiques.
InformationsquelleAutor Boom Shakalaka
7

La bonne solution est de récupérer les tiques à l'aide de .les tiques() méthode, de les filtrer pour ne garder que les entiers et les passer à .tickValues():
```
const yAxisTicks = yScale.ticks()
    .filter(tick => Number.isInteger(tick));
const yAxis = d3.axisLeft(yScale)
    .tickValues(yAxisTicks)
    .tickFormat(d3.format('d'));
```
Pour l'intégralité ici est l'explication pourquoi d'autres solutions sont mauvaises:

@BoomShakalaka solution utilise .tickSubdivide() méthode, qui n'existe plus.

@cssndrx et @kris solutions vous forcer à préciser le nombre de tiques, de sorte qu'il ne fonctionnera pas dans le cas générique.
- A fonctionné à merveille. Réponse correcte.
- Bouée de sauvetage. Je pense que j'ai été à la piscine autour de l'ancienne version des solutions. Celui-ci est applicable pour moi.
InformationsquelleAutor diralik
4

Vous pouvez par programmation à définir le nombre de tiques à data.length - 1 (ce qui résout le problème que vous aviez pour le petit nombre de tiques ainsi)
```
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right")
    .tickFormat(d3.format("d"))
    .ticks(data.length - 1)
```
- les données.longueur - 1 est liée à l'axe x, pourquoi devrait-il être utilisé lors de la configuration de tiques sur l'axe des y? Il vaut mieux serait de qqch. comme max-valeur pour définir les graduations sur l'axe des y
InformationsquelleAutor cssndrx
1

À partir de la liste de toutes les solutions, je n'ai pas été en mesure de se débarrasser des graduations.
```
.xAxis().ticks(4)
.tickFormat(d3.format("d"));
```
enlever les étiquettes, mais pas les tiques.

Je propose donc d'appliquer un seuil sur les tiques(). Si moins de 4 il est alors placé à la limite de lui-même (0,1,2,3). Est fait avec:
```
.on("preRedraw", function(chart) {
    var maxTick = chart.group().top(1)[0].value;
    if (maxTick < 4) {
      chart.xAxis().ticks(maxTick);
    } else {
      chart.xAxis().ticks(4);
    }
```
});

Un jsfiddle est disponible à partir de https://jsfiddle.net/PBrockmann/k7qnw3oj/

Laissez-moi savoir si il existe une solution plus simple.
Ce qui concerne

InformationsquelleAutor PBrockmann

Utilisé cette ASTUCE pour faire ce travail sur des graphiques dynamiques (1 ou plusieurs graphiques sur la page)

Qui a fait le tour. J'ai changé pour être
Les mathématiques.min(maxHeight+1,ordonnée.les tiques()) donc, si le graphique de la hauteur est moins
que le nombre de tiques, il réduit le nombre de tiques. – Jeff
Étages Nov 28 '12 à 2:47

  //It is either 10 or Maximum Chart height + 1 

        var graphValues = selection.data()[0].map(function(obj) {
            return obj['count'];
        }).compact();  

        Array.prototype.maxValArray = function() {
          return Math.max.apply(null, this);
        };

        var maxValue = graphValues.maxValArray();

        yAxis.ticks(Math.min(maxValue + 1, 10))

InformationsquelleAutor kris

Vous devez vous connecter pour publier un commentaire.