D3 marques de tique sur les entiers seulement
j'ai un diagramme à barres d3 dont les valeurs vont de 0-3. Je voudrais que l'axe des y ne montre que des valeurs entières, ce que je peux faire par
var yAxis = d3.svg.axis().scale(y).orient("right").tickFormat(d3.format("d"));
cependant, il y a encore des marques de tique sur les marques non-entières. Le fait de définir le format de la tique ne cache que ces étiquettes. Je peux définir explicitement le nombre de tiques ou les valeurs des tiques, mais ce que je voudrais faire est de juste être en mesure de spécifier que les marques de tiques apparaissent seulement à des valeurs entières. Est-ce possible?
4 réponses
Vous pouvez 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);
vous pouvez programmatiquement 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)
utilisé cette astuce pour faire ce travail sur les graphiques dynamiques (1 ou plus graphiques sur la page)
ça a fait l'affaire. J'ai changé pour être Mathématique.min (maxHeight+1, yAxis.ticks ()) donc si la hauteur du graphe est inférieure que le nombre de tiques, il réduit le nombre de tiques. – Jeff Storey 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))
.xAxis().ticks(4)
.tickFormat(d3.format("d"));
supprimer les étiquettes, mais pas les tiques.
donc je propose d'appliquer un seuil sur ticks(). Si elle est inférieure à 4, elle est fixée à la limite elle-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);
}
});
https://jsfiddle.net/PBrockmann/k7qnw3oj/faites-moi savoir s'il y a une solution plus simple. Ce qui concerne