charts - canvasjs - Cómo aplicar salto horizontal a un gráfico de barras d3.js

graph js

Question

Estoy usando Rickshaw (basado en d3.js) para trazar gráficos de barras apiladas. El problema es que la primera barra suele ser mucho más alta que las otras, arruinando los comentarios visuales.

Usar una escala logarítmica es (supongo) que no es una opción aquí, porque entonces las proporciones entre las pilas en una barra se romperán. Quería introducir un corte horizontal como en la siguiente imagen:

Sin embargo, no puedo encontrar ninguna función lista para usar de Rickshaw o d3.js para hacer algo como esto. ¿Alguna sugerencia sobre cómo hacer uno?

Answer 1

El componente d3fc-discontinuous-scale adapta cualquier otra escala (por ejemplo, una escala lineal d3) y agrega el concepto de discontinuidades. Estas discontinuidades se determinan a través de un "proveedor de discontinuidad", que se puede usar para crear uno o más "vacíos" en una escala.

Por ejemplo, para eliminar un rango, puede construir una escala de la siguiente manera:

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

Aquí hay un ejemplo completo que muestra cómo usar esto para crear un "corte" en una escala con el fin de representar valores que tienen grandes brechas en su rango general.

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

Answer 2

Esto requeriría bastante trabajo adicional. Aquí hay un resumen de lo que tendrías que hacer.

• Cree dos escalas, una para la parte inferior y otra para la superior. Establecer dominios y rangos en consecuencia.
• Pase los valores a la escala inferior, limitándolos al valor máximo del dominio de manera que las barras que son más largas alcancen el máximo.
• Pase los valores a la escala superior, filtrando aquellos que son más bajos que el mínimo.

Básicamente necesita crear dos gráficos que estén alineados entre sí para dar la impresión de que solo hay uno. Si lo tienes en cuenta, hacerlo no debería ser demasiado difícil.

Aquí hay una prueba rápida y sucia de concepto que usa la .clamp(true) la escala lineal para evitar que las barras sean demasiado largas para los valores fuera del dominio.