d3 etichette tick sovrapposte autospaziale

Question

C'è un modo in d3 per non disegnare le etichette di tick sovrapposte? Ad esempio, se ho un grafico a barre, ma le barre sono larghe solo 5 pixel e le etichette sono larghe 10 pixel, finisco con un pasticcio disordinato. Attualmente sto lavorando a un'implementazione per disegnare solo le etichette quando non si sovrappongono. Non riesco a trovare alcun modo per farlo, ma non ero sicuro se qualcun altro avesse affrontato questo problema.

Answer 1

Non c'è modo di farlo automaticamente in D3. Puoi impostare il numero di tick o i valori di tick esplicitamente (vedi the documentation), ma dovrai calcolare tu stesso i rispettivi numeri/valori. Un'altra opzione potrebbe essere quella di ruotare le etichette in modo tale che ci siano meno possibilità che si sovrappongano.

In alternativa, come suggerito nell'altra risposta, è possibile provare a utilizzare un layout di forza per posizionare le etichette. Per chiarire, dovresti usare il layout della forza solo sulle etichette - questo è completamente indipendente dal tipo di grafico. Ho fatto questo in this example, che è leggermente più rilevante di quello collegato nell'altra risposta.

Si noti che se si utilizza la soluzione di layout forza, non è necessario animare la posizione delle etichette. Potresti semplicemente calcolare il layout della forza fino a quando converge e quindi traccia le etichette.

Answer 2

si potrebbe provare qualcosa di cui this discussione, in particolare this example modo che le etichette sono spinti su/giù/fuori del modo in modo che tutti possono essere montate. Ciò richiede l'utilizzo di un forze separate, una per i nodi e un altro per le etichette stesse.

Answer 3

Ho avuto un problema simile con più (sotto) asse, dove l'ultimo segno di spunta si sovrappone al mio asse verticale in alcune situazioni (a seconda della larghezza dello schermo), quindi ho appena scritto una piccola funzione che confronta il posizione della fine dell'etichetta di testo con la posizione dell'asse successivo. Questo codice è molto specifico per il mio caso d'uso, ma potrebbe adattato facilmente alle vostre esigenze:

var $svg = $('#svg'); 

// get the last tick of each of my sub-axis 
$('.tick-axis').find('.tick:last-of-type').each(function() { 

    // get position of the end of this text field 
    var endOfTextField = $(this).offset().left + $(this).find('text').width(); 

    // get the next vertical axis 
    var $nextAxis = $('line[data-axis="' + $(this).closest('.tick-axis').attr('data-axis') + '"]'); 

    // there is no axis on the very right, so just use the svg width 
    var positionOfAxis = ($nextAxis.length > 0) ? $nextAxis.offset().left : $svg.offset().left + $svg.width(); 

    // hide the ugly ones! 
    if (endOfTextField > positionOfAxis) { 
    $(this).attr('class', 'tick hide'); 
    } 

}); 

zecche con color: aqua sono quelle nascoste: