Come applicare l'interruzione orizzontale a un grafico a barre d3.js

Question

Sto utilizzando Rickshaw (basato su d3.js) per tracciare grafici a barre in pila. Il problema è che la prima barra di solito è molto più alta delle altre, rovinando il feedback visivo.

L'utilizzo della scala logaritmica non è (presumo) un'opzione qui, perché quindi le proporzioni tra le pile in una barra si romperanno. Volevo introdurre un'interruzione orizzontale come nell'immagine seguente:

Tuttavia, non riesco a trovare alcuna funzione predefinita di Rickshaw o d3.js per fare qualcosa di simile. Qualche suggerimento su come crearne uno?

Answer 1

Ciò richiederebbe un po 'di lavoro aggiuntivo. Ecco uno schema di ciò che dovresti fare.

• Creare due scale, una per la parte inferiore e una per la parte superiore. Imposta domini e intervalli di conseguenza.
• Passare i valori alla scala inferiore, limitandoli al valore di dominio massimo in modo che le barre più lunghe raggiungano il massimo.
• Passare valori alla scala superiore, filtrando quelli che sono inferiori al minimo.

Fondamentalmente è necessario creare due grafici allineati tra loro per dare l'impressione che ce ne sia uno solo. Se tieni questo in mente, farlo non dovrebbe essere troppo difficile.

Ecco uno proof of concept rapido e sporco che utilizza la scala lineare .clamp(true) per impedire che le barre diventino troppo lunghe per valori esterni al dominio.

Answer 2

Il d3fc-discontinuous-scale component adatta qualsiasi altra scala (ad esempio una scala lineare d3) e aggiunge il concetto di discontinuità. Queste discontinuità sono determinate tramite un "fornitore di discontinuità", che può essere utilizzato per creare uno o più "spazi vuoti" in una scala.

Ad esempio, per rimuovere un intervallo, è possibile costruire una scala come segue:

var scale = scaleDiscontinuous(scaleLinear()) 
    .discontinuityProvider(discontinuityRange([50, 75])) 

Ecco un esempio completo che mostra come utilizzare questo per creare un 'break' in una scala, al fine di rendere i valori che presentano ampi spazi nell'intervallo complessivo.

https://bl.ocks.org/ColinEberhardt/b60919a17c0b14d745c881f48effe681