Modificare i segni di spunta sull'asse x

Question

Sto cercando di capire d3.js. Durante la definizione dell'asse, Come posso ottenere un'etichettatura personalizzata sull'asse x. Ad esempio, l'etichettatura predefinita che ottengo è:

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

considerando che, voglio qualcosa di simile:

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

Attualmente sto imparando e lavorando sul codice (leggermente modificato) da esempi ufficiali forniti:

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

Answer 1

I segni di spunta predefiniti per le scale quantitative sono multipli di 2, 5 e 10. Sembra che vogliano multipli di 6; sebbene inusuale, ciò potrebbe avere senso in base alla natura dei dati sottostanti. Così, mentre è possibile utilizzare axis.ticks per aumentare o diminuire il numero di tick, sarà sempre tornare multipli di 2, 5 e 10 - non 6.

Se volete multipli di 6, è possibile utilizzare axis.tickValues per specificare i valori di tic in modo esplicito. Questo viene in genere utilizzato in combinazione con d3.range. Per esempio:

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

Se si vuole calcolare i valori in modo dinamico, utilizzare il dominio del x-scala per recuperare il valore più basso e più alto. Inoltre, tieni presente che il limite superiore dell'intervallo è esclusivo, quindi nell'esempio precedente il valore di tick più grande è 76. Puoi rendere il limite superiore compreso rendendo il valore di stop dell'intervallo leggermente più grande (ad es. 81).