Canvas
Rápido donde importa, honesto sobre el límite.
El dibujo guiado por nivel de zoom renderiza localidades solo cuando importan, el data binding de D3 mantiene las actualizaciones quirúrgicas, y estrategias por bloques llevan recintos a miles de localidades.
¿Te suena familiar?
El pán a tirones
Un plano que tartamudea al desplazarse se lee como roto, diga lo que diga el benchmark. El dibujo por nivel mantiene la interacción fluida.
10.000 nodos en la primera página
Renderizar cada localidad antes de que nadie haga zoom es cómo se funden los navegadores. Las localidades se dibujan en contexto de bloque, cuando se leen.
Dolor de pellizco-zoom en móviles
La mayoría de entradas se venden en móvil. Gestos D3-zoom y actualizaciones quirúrgicas mantienen los teléfonos ágiles.
Ingeniería, no marketing, sobre la velocidad
01Dibujado cuando se leeLas localidades se renderizan en contexto de bloque al hacer zoom. El DOM guarda lo que el ojo puede usar.
02Data binding quirúrgicoLos joins de D3 actualizan lo que cambió. Una retención voltea un círculo, no el árbol.
03Un límite declaradoÓptimo por debajo de cinco mil localidades, máximo recomendado por debajo de diez, y patrones para ir más lejos.
04Estrategias por bloquesPartir recintos enormes en bloques y cargar secciones bajo demanda es un patrón documentado, no una aventura.
05Reflow bajo demanda¿Contenedor redimensionado? reflow() recalcula el layout sin recargar.
06Escala de plataforma cuando la necesitasLas puestas a la venta en estadios combinan el renderizador con modelos de lectura por bloque y bus en tiempo real de la plataforma.
Por qué se mantiene fluido
- 01Renderizado por nivelLa vista general dibuja la estructura; las localidades aparecen a nivel de bloque.
- 02Actualizaciones mínimasLos cambios de estado tocan solo las localidades afectadas.
- 03Divide para escalarRenderizado por bloques y secciones lazy cargan las salas más grandes.
Estresa la demo
Desplaza, haz zoom y selecciona a escala, en vivo.