Queremos que nuestra visualización de los Premios Nobel (Nobel-viz) incluya una lista de los ganadores actualmente seleccionados y un cuadro de biografía (también conocido como bio-box) para mostrar los detalles de un ganador individual (ver Figura 20-1). Al hacer clic en un ganador de la lista, el usuario puede ver sus datos en el cuadro de biografía. En este capítulo veremos cómo construir la lista y la biocaja, cómo repoblar la lista cuando el usuario seleccione nuevos datos (con los filtros de la barra de menús) y cómo hacer que se pueda hacer clic en la lista.
Figura 20-1. Los elementos objetivo del capítulo
Como se demostrará en este capítulo, D3 no sólo sirve para crear visualizaciones SVG. Puedes unir datos a cualquier elemento del DOM y utilizarlos para cambiar sus atributos y propiedades o sus funciones de llamada de retorno de manejo de eventos. La unión de datos y la gestión de eventos de D3 (que se consigue mediante el método on ) funcionan muy bien con interfaces de usuario comunes, como la lista clicable de este capítulo y los cuadros de selección.1
Vamos a ocuparnos primero de la lista de ganadores y de cómo se construye con el conjunto de datos de los ganadores seleccionados actualmente. ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month, and much more.
