Tengo una aplicación React donde he creado un gráfico de líneas con capacidades de zoom y panorámica. Cada punto de datos en el gráfico es un componente de reacción separado.

El zoom se activa en el evento de zoom en el contenedor principal, luego zoomTransform se usa para calcular nuevas escalas x e y llamadas zoomedXScale y zoomedYScale . Una vez que se han calculado estas nuevas escalas, se llama al useEffect en los componentes renderizados y se actualizan las coordenadas x e y.

La zoom function en el contenedor principal:

 const zoomed = d3 .zoom() .extent([ [0, 0], [width, height] ]) .scaleExtent([MinZoom, MaxZoom]) // This control how much you can unzoom (x0.5) and zoom (x20) .translateExtent([ [0, 0], [width, height] ]) .on('zoom', (e: d3.D3ZoomEvent<SVGElement, unknown>) => { const zoomState = e.transform; setCurrentZoomState(zoomState); });

Ejemplo de useEffect en el componente secundario representado en el svg:

 useEffect(() => { const image = d3.select(ref.current); image .attr('x', zoomedXScale(price)) .attr('y', zoomedYScale(price)); }, [price, zoomedXScale, zoomedYScale, zoomTransform]);

El problema de rendimiento ocurre cuando hay entre 500 y 1000 componentes que se procesan y cada una de las coordenadas x e y se actualizan para cada evento de zoom, se vuelve muy lento.

Una posible solución en la que pensé después de leer otras publicaciones relacionadas es representar solo los puntos dentro de la ventana gráfica actual. Pero también quería saber si existe una solución más eficiente para actualizar las coordenadas de los diferentes componentes en una aplicación React usando d3 con zoom y panorámica en un gráfico de líneas.