Post Top Ad

Your Ad Spot

lunes, 27 de julio de 2020

Dibujar gráficos vectoriales escalables con JavaScript D3

Dibujar gráficos vectoriales escalables con JavaScript D3

En el último tutorial, aprendimos acerca de los gráficos vectoriales escalables. Como decimos, SVG es un lenguaje de marcado basado en XML que puede crear vectores matemáticos para crear hermosos gráficos sin pérdida de calidad, sin importar el tamaño de la imagen. Como también aprendimos, puede usar un programa como Adobe Illustrator para crear gráficos y luego simplemente guardarlos en un formato SVG para usar en sus páginas web. Ahora echemos un vistazo a cómo podemos usar la biblioteca D3 JavaScript al dibujar gráficos vectoriales escalables.


Usando D3 para dibujar formas básicas

En primer lugar, configuraremos un fragmento de HTML que podemos usar para agarrar con D3, para agregar y manipular. Al igual que cuando se utiliza una base de datos o un archivo en la programación, necesitamos un identificador para "agarrar" el recurso, por así decirlo. Haremos lo mismo aquí. Un elemento div será a lo que anexemos nuestros gráficos. Aquí está nuestro punto de partida.

Ahora podemos usar algunas secuencias de comandos para recrear nuestra área SVG.

Dibujando formas SVG con D3

Sintaxis bastante sencilla aquí. Agarramos el elemento DOM con el id de svghandle, le agregamos un elemento SVG, establecemos algunos atributos y le damos estilo.

Veamos si podemos recrear el rectángulo que dibujamos en el tutorial anterior usando nada más que D3.

Dibujar un rectángulo con D3 JS

Si de hecho! Trabajando tal como esperábamos

Una cosa a tener en cuenta sobre el estilo de script D3. Dado que JavaScript ignora los espacios en blanco, podemos sangrar cada línea de una manera que sea más fácil de entender y razonar. No hay diferencia si encadena cada comando en una sola cadena grande. De hecho, eso es lo que sucede cuando los archivos JavaScript se minimizan por razones de rendimiento.

Continuando con el dibujo de gráficos vectoriales escalables, ahora intentemos escribir un círculo como lo hicimos antes también.

Dibujando un círculo con D3 JS

¡Okay! Estamos entendiendo esto, hagamos un triángulo ahora.

Dibujando un triángulo con D3 JS

Eso funcionó a la perfección, y al igual que todos los demás, también podemos crear texto SVG con D3.

Dibujar texto con SVG

SVG


Encadenamiento de comandos junto con D3 JS

Probemos ahora algo un poco más avanzado. Mire este script y el resultado, luego vea si puede reconstruir cómo funciona todo.

Dibujando formas SVG con D3


Dibujando una elipse con D3 JS

Hasta ahora, hemos creado algunas formas básicas, como un rectángulo, un círculo y un triángulo que dibujan gráficos vectoriales escalables con JavaScript D3. Ahora tratemos de dibujar una elipse, que es muy similar a un círculo, y casi igual de fácil de crear. Considere este fragmento de D3.

Dibujar una elipse vertical con D3 JS

¡Frio! Al igual que un círculo, tenemos un radio con la elipse. De hecho, en lugar de tener un solo radio, en realidad tenemos dos en la elipse. El primer radio en la elipse es rx y se refiere al radio en el plano horizontal de la elipse. El radio ry de la elipse se refiere al plano vertical. Si estos dos valores son perfectamente iguales, entonces tienes un círculo perfecto. Entonces, todos los círculos pueden ser una elipse, pero no todas las elipses pueden ser un círculo🙂

Intentemos rotar esa elipse de lado. Esto es fácil de hacer simplemente intercambiando los valores rx y ry.

Dibujar una elipse horizontal con D3

Uso de trazo y ancho de trazo

En algunas de estas formas más recientes, puede ver que estamos agregando un borde atractivo a la forma. Hacemos esto configurando strokestroke-widthen el estilo. Se asigna un color de a stroke, y luego elegir el ancho que le gustaría que el accidente cerebrovascular que se usa stroke-widthSi está familiarizado con el software Adobe Photoshop o Illustrator, esto tiene mucho sentido para usted.


Polilíneas vs Polígonos

Otra cosa que vale la pena mencionar al dibujar gráficos vectoriales escalables es la diferencia entre una Polilínea y un Polígono. Habíamos usado la polilínea para dibujar un triángulo al principio de esta serie de Tutoriales D3. Esto está bien, pero también podemos usar un Polígono para esta aplicación. De hecho, Polygon es probablemente el elemento más técnicamente correcto para usar en formas autocontenidas. Entonces, ¿cómo diferenciamos esto con una polilínea? Bueno, cuando piensas en una polilínea, piensa en ella como un conjunto de pasos y los miras desde un lado. Los pasos son una gran línea, que tiene muchos puntos. Veamos un ejemplo de este concepto.

Pasos de polilínea con D3

Dibujar un octágono usando <polygon>


Copiando dibujos SVG usando xlink: href

Copiando dibujos SVG usando xlink: href

Dibujar gráficos vectoriales escalables con D3 Resumen de JavaScript

Este tutorial nos hizo ir más allá de dibujar gráficos vectoriales escalables a mano en HTML sin formato y SVG Markup. Ahora vemos cómo usar la biblioteca D3 JavaScript para alcanzar mediante programación el DOM y crear varias formas primitivas con gráficos vectoriales escalables. Al construir sobre las formas básicas como Círculos, Rectángulos, Elipses, Triángulos, Polígonos, y más, comenzará a construir algunas imágenes realmente ingeniosas para sus páginas web. El único límite es tu propia imaginación y creatividad.


No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas