d3.js - tick - d3 js tutorial

D3 marcas de verificación en enteros solamente

Question

Tengo un gráfico de barras d3 cuyos valores van desde 0-3. Me gustaría que el eje y muestre solo valores enteros, lo que puedo hacer mediante

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

Sin embargo, todavía hay marcas de verificación en las marcas no enteras. La configuración del formato de marca solo oculta esas etiquetas. Puedo establecer explícitamente el número de marcas o los valores de marca, pero lo que me gustaría hacer es poder especificar que las marcas de verificación solo aparecen en valores enteros. ¿Es eso posible?

Answer 1

De todas las soluciones enumeradas, no he podido deshacerme de las marcas.

.xAxis().ticks(4)
.tickFormat(d3.format("d"));

quitar las etiquetas pero no las garrapatas

Así que propongo aplicar un umbral en las garrapatas (). Si es inferior a 4, entonces se establece en el límite en sí (0,1,2,3). Se hace con:

.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 en https://jsfiddle.net/PBrockmann/k7qnw3oj/

Déjame saber si hay una solución más simple. Saludos

Answer 2

Puede programar la cantidad de ticks en data.length - 1 (esto resuelve el problema que estaba teniendo también para pequeños números de ticks)

var yAxis = d3.svg.axis()
.scale(y)
.orient("right")
.tickFormat(d3.format("d"))
.ticks(data.length - 1)

Answer 3

Puedes agregar .ticks (4) y .tickSubdivide (0) como lo he hecho a continuación:

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

Answer 4

Usé este TIP para hacer que esto funcione en gráficos dinámicos (1 o más gráficos en la página)

Eso hizo el truco. Cambié a ser Math.min (maxHeight + 1, yAxis.ticks ()) por lo que si la altura del gráfico es menor que el número de tics, se reduce el número de tics. - Jeff Storey 28 de noviembre de 2012 a las 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))