Come limitare d3.svg.axis alle etichette intero?

Question

Esiste la possibilità di limitare il numero di etichette integer d3.svg.axis visualizzate sul grafico? Prendi ad esempio questo grafico. Ci sono solo 5 taglie qui: [0, 1, 2, 3, 4]. Tuttavia, i segni di spunta vengono visualizzati anche per .5, 1.5, 2.5 e 3.5.

Answer 1

Si dovrebbe essere in grado di utilizzare d3.format invece di scrivere il proprio funzione di formattazione per questo.

d3.svg.axis() 
    .tickFormat(d3.format("d")); 

È inoltre possibile utilizzare tickFormat sulla scala che l'asse utilizzerà automaticamente per impostazione predefinita.

Answer 2

ho capito che è sufficiente per nascondere questi valori, piuttosto che ad escludere del tutto. Questo può essere fatto utilizzando la tickFormat (https://github.com/mbostock/d3/wiki/Formatting#wiki-d3_format) in quanto tale:

d3.svg.axis() 
    .tickFormat(function(e){ 
     if(Math.floor(e) != e) 
     { 
      return; 
     } 

     return e; 
    }); 

Answer 3

L'utilizzo di d3.format("d") come tickFormat potrebbe non funzionare in tutti gli scenari (see this bug). Sui dispositivi Windows Phone (e probabilmente su altri) i calcoli imprecisi possono portare a situazioni in cui le zecche non vengono rilevate correttamente come numeri interi, i. e. un segno di spunta di "3" può essere memorizzato internamente come 2.9999999999997 che per d3.format("d") non è un numero intero.

Come risultato l'asse non viene visualizzato affatto. Questo comportamento diventa particolarmente evidente negli intervalli di battito fino a 10.

Una soluzione possibile è tollerare l'errore della macchina specificando un valore epsilon. I valori non devono essere interi esatte in questo modo, ma potrebbero differire dal prossimo numero intero fino alla gamma Epsilon (che dovrebbe essere il modo più basso del vostro errore nei dati):

var epsilon = Math.pow(10,-7); 

var axis = d3.svg.axis().tickFormat(function(d) { 
    if (((d - Math.floor(d)) > epsilon) && ((Math.ceil(d) -d) > epsilon)) 
     return; 
    return d; 
} 

Un'altra soluzione, che viene anche menzionato in altri thread, è quello di specificare un numero fisso di zecche e quindi arrotondare i tick (che ora dovrebbero essere "quasi" interi) all'intero più vicino. È necessario conoscere il valore massimo dei dati affinché questo funzioni:

var axis = d3.svg.axis().ticks(dataMax).tickFormat(d3.format(".0f"))