Discutiendo la naturaleza minimalista de SVG para gráficos 2D y los beneficios de usar React y SVG con un toque de D3 para la visualización de datos. Entendiendo formas básicas de SVG como líneas, rectángulos, círculos, elipses, polilíneas, polígonos y rutas. Explorando elementos de grupo para el estilo, el cuadro de vista para la posición del sistema de coordenadas, y la naturaleza declarativa de SVG que se integra bien con React.
A menos que realmente necesites una biblioteca completa de visualización de datos porque necesitas múltiples tipos de gráficos o múltiples formas de configurarlo, soporte de temas y cosas así, probablemente sea un exceso para tu caso de uso. Así que hoy lo que vamos a hacer es construir una biblioteca que repelerá componentes de datos en React y SVG, como dije, con un poco de D3, del cual hablaré en un minuto.
Así que primero, desmitifiquemos un poco SVG, especialmente si es nuevo para ti, para que puedas entender los ejemplos de código que revisaremos. SVG son gráficos vectoriales escalables, en caso de que no lo sepas, que es básicamente un lenguaje basado en marcado para describir gráficos 2D. Lo bueno de SVG es que es un lenguaje muy, muy minimalista. Básicamente, solo soporta un puñado de formas. Todas ellas están en la pantalla ahora mismo. Así que básicamente, ahora mismo, ya sabes, como, más del 50% de SVG. Ya está en tus manos.
Tenemos una línea, un rectángulo, un círculo y una elipse. También tenemos una polilínea, que es una línea compuesta de múltiples puntos, un polígono, que es básicamente lo mismo. Solo que los primeros y últimos puntos se conectarán para crear una forma cerrada. Y tenemos nuestra ruta SVG, que es la más versátil de todas. No vamos a entrar en la sintaxis en sí, pero básicamente, te permite describir cualquier forma que desees usando líneas y curvas. También tenemos en este ejemplo, puedes ver un elemento de grupo que nos permite estilizar múltiples formas al mismo tiempo. También puedes ver el estilo en sí, que es principalmente trazos y rellenos, el equivalente a bordes y fondos que obtenemos de HTML. Y en la parte superior, tomaré un minuto para hablar sobre el cuadro de vista que puedes ver en el elemento SVG que básicamente, el valor en sí es X, Y, ancho y alto de lo que es la posición de la cámara de nuestro sistema de coordenadas.
Comments