d3.js - swal - Los gráficos NVD3 no se procesan correctamente en la pestaña oculta

swal js cdn

Question

Estoy creando una página que contiene muchos gráficos, que se muestran de uno en uno según la pestaña que esté viendo.

El gráfico en la pestaña inicialmente activa se renderiza correctamente. Sin embargo, cuando hago clic en otra pestaña, el gráfico no se representa correctamente.

Presumiblemente esto se debe a que el campo oculto no tiene dimensiones hasta que se hace visible. De hecho, si cambio el tamaño de la ventana, el gráfico corregirá sus proporciones y se procesará para que llene el ancho disponible.

Puedo solucionar este problema definiendo explícitamente el tamaño del gráfico a través de css, pero esto anula el aspecto sensible de los gráficos.

¿Puede alguien decirme cómo desencadenar el mismo evento NVD3 que se activa cuando la ventana cambia de tamaño? De esa manera, puedo vincularlo a la selección de una nueva pestaña y, con suerte, remediar el problema de representación.

Answer 1

Descubrí cómo desencadenar el evento de cambio de tamaño que necesitaba. En mi caso las pestañas son manejadas por bootstrap. Así que simplemente modifiqué el evento de la pestaña de muestra de arranque para desencadenar un evento de cambio de tamaño de página también. Es un poco indirecto, pero hace el trabajo:

jQuery(''#myTab a'').click(function (e) {
e.preventDefault()
jQuery(this).tab(''show'')
jQuery(window).trigger(''resize''); // Added this line to force NVD3 to redraw the chart
})

Answer 2

El evento que generalmente desencadena un redibujado es el evento de cambio de resize la ventana; NVD3 no usa un evento personalizado para esto. Aunque puedes controlar esto tú mismo; la definición habitual es

nv.utils.windowResize(function() { d3.select(''#chart svg'').call(chart); });

(donde "#chart" es el elemento que contiene el gráfico). No hay nada que le impida activar el código en otro evento o simplemente ejecutar el código de redibujo explícitamente cuando cambia la pestaña.

Answer 3

Estaba enfrentando el mismo problema. Estaba usando ng-show para hacer div oculto. Una vez que reemplacé ng-show con ng-si puedo ver el gráfico dibujado en el comportamiento esperado. Explicación:

1. Cuando usamos ng-show o ng-hide para hacer que div oculto, solo cambia su propiedad de visualización, pero div estará en dom.

2. Cuando usamos ng-if div se elimina de dom y se agrega nuevamente a dom, por lo que internamente también se realiza una operación de redibujado en el gráfico nvd3. Por lo tanto vemos el gráfico correcto en lugar de uno aplastado.

Answer 4

Solo agrega este JavaScript:

$(''a[data-toggle="tab"]'').on(''shown.bs.tab'', function (e) {
window.dispatchEvent(new Event(''resize''));
})

hidden.bs.tab es el evento que se hidden.bs.tab después de que se muestra una nueva pestaña según los documentos de Bootstrap. Este código activa un evento de cambio de tamaño después de cada cambio de pestaña.

Answer 5

Tuve el mismo problema (gráficos en varias pestañas), y esto es lo único en lo que puedo trabajar.

$(function () {
$(document).on(''shown.bs.tab'', ''a[data-toggle="tab"]'', function (e) {
window.dispatchEvent(new Event(''resize''));
});
});

Sin embargo, tengo la sensación de que todos los gráficos se vuelven a representar, independientemente de si están en la pestaña activa (visible) o en las pestañas no seleccionadas (ocultas).

¿Alguien sabe cómo asegurarse de que SOLAMENTE se redimensione / redisezca la tabla activa?

Answer 6

un enfoque más eficiente sería utilizar el método chart.update ()

var chart_x = nv.models.somechart()
var chart_y = nv.models.somechart()

..... mostrar gráficos

jQuery(''#myTab a'').click(function (e) {
e.preventDefault()
jQuery(this).tab(''show'')
if(jQuery(this)...something === ''..x..'')
chart_x.update(); //CALL THE UPDATE
else ... 

})

Answer 7

Razón para una nueva respuesta

Vanilla Javascript es necesario para mucha gente en 2018 . Como muchos de los frameworks y bibliotecas de Javascript que existen hoy en día no funcionan bien con jQuery. Una vez, fue aceptable responder a todos los problemas de Javascript con una solución jQuery, pero ya no es posible.

Problema

Al cargar los gráficos C3.js o D3.js, si la ventana gráfica no está activa en el sitio durante la carga de la página, los gráficos no se representan correctamente.

Ejemplo

1. Si escribe la URL, abra una nueva pestaña y luego regrese después de que se cargue la página.

2. Si actualiza la página que contiene sus gráficos, minimice el navegador y vuelva a abrirlo una vez que se haya cargado la página.

3. Si actualiza o va a la página con los gráficos, pase a una nueva ventana en su computadora. Luego regresa a la página con los gráficos después de que se hayan cargado.

En todos estos casos, sus gráficos C3.js / D3.js no se procesarán correctamente. Normalmente verás un lienzo en blanco. Por lo tanto, si estuviera esperando un gráfico de barras, vería un lienzo sin que se dibujen las barras.

Fondo

Aunque he visto respuesta a esta pregunta, necesitaba una respuesta que NO usara jQuery. Ahora que hemos llegado a los días de todo, no se puede arreglar con jQuery. Pensé que parecía adecuado proporcionar una respuesta de JavaScript de vainilla a esta pregunta.

Mi equipo enfrentó el problema de que los gráficos de C3.js / D3.js no se cargarían si actualizaba la página y la borraba o minimizaba. Básicamente, si no se mantuvo en la página y la mantuvo en el sitio hasta que se terminó de cargar, no vería los gráficos hasta que cambiara el tamaño de la página nuevamente. Sé que este es un problema que le ocurre a todos los usuarios de C3.js / D3.js, pero estamos utilizando específicamente Lightning en Salesforce.

Responder

Nuestra solución fue agregar esto a la función del controlador que inicializa los gráficos. Cualquiera puede usar esto en cualquier función que escriba para inicializar sus gráficos C3.js / D3.js independientemente de su pila. Esto no depende de Salesforce, pero sí funciona si se enfrenta a este problema en Salesforce.

document.addEventListener(''visibilitychange'', () => {
console.log(document.visibilityState);
window.dispatchEvent(new Event(''resize''));
});