d3.js - Cambiar las marcas en el eje x

Question

Estoy tratando de descubrir d3.js. Al definir el eje, ¿cómo puedo obtener un etiquetado personalizado en el eje x? Por ejemplo, el etiquetado predeterminado que obtengo es:

|------|------|------|------|------|------|
20    30     40     50     60     70     80

Mientras que, quiero algo como:

|------|------|------|------|------|------| ....
20    26      32    38     44     50     56

Actualmente estoy aprendiendo y trabajando en el código (ligeramente modificado) de los ejemplos oficiales proporcionados:

var xAxis = d3.svg.axis().scale(x).tickPadding(7).orient("bottom");
var yAxis = d3.svg.axis().scale(y).tickPadding(5).orient("left");

Answer 1

Los ticks predeterminados para las escalas cuantitativas son múltiplos de 2, 5 y 10. Pareces querer múltiplos de 6; aunque inusual, esto podría tener sentido según la naturaleza de los datos subyacentes. Entonces, aunque puede usar axis.ticks para aumentar o disminuir el conteo de ticks, siempre devolverá múltiplos de 2, 5 y 10, no 6.

Si quiere múltiplos de 6, puede usar axis.tickValues para especificar los valores de tick de forma explícita. Esto normalmente se usa junto con d3.range . Por ejemplo:

xAxis.tickValues(d3.range(20, 80, 4));

Si desea calcular dinámicamente los valores, use el dominio de la escala x para recuperar el valor más bajo y más alto. Tenga en cuenta también que el límite superior del rango es exclusivo, por lo que en el ejemplo anterior, el valor de tilde más grande es 76. Puede hacer que el límite superior sea inclusivo haciendo que el valor de parada del rango sea ligeramente mayor (por ejemplo, 81).