Post Top Ad

Your Ad Spot

viernes, 11 de septiembre de 2020

Dibujar gráficos vectoriales escalables con D3 JavaScript

 Dibujar gráficos vectoriales escalables con D3 JavaScript

En el último tutorial, aprendimos sobre gráficos vectoriales escalables. Como decimos, SVG es un lenguaje de marcado basado en XML que es capaz de crear vectores basados ​​en matemáticas 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 de JavaScript D3 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 agarrarlo con D3, para agregar y manipular. Al igual que cuando se usa 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 agreguemos nuestros gráficos. Aquí está nuestro punto de partida.

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

Dibujar formas SVG con D3

Sintaxis bastante sencilla aquí. Tomamos 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

¡Sí, de hecho! Trabajando como esperábamos

Una cosa a tener en cuenta sobre el estilo de secuencias de comandos de 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 hace ninguna diferencia si tuviera que encadenar todos los comandos en una cadena grande. De hecho, eso es lo que sucede cuando los archivos JavaScript se minimizan por motivos de rendimiento.

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

Dibujar un círculo con D3 JS

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

Dibujar 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.

Dibujar formas SVG con D3


Dibujar una elipse con D3 JS

Hasta ahora hemos creado algunas formas básicas como un rectángulo, círculo y triángulo dibujando gráficos vectoriales escalables con D3 JavaScript. Intentemos ahora 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 solo un radio, en realidad tenemos dos en la elipse. El primer radio de 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

Hacer uso del trazo y el ancho del 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 utilizado 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 técnicamente más correcto para usar en formas autónomas. Entonces, ¿cómo diferenciamos esto con una polilínea? Bueno, cuando piense en una polilínea, piense en ella como un conjunto de pasos y los verá 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>


Copiar dibujos SVG usando xlink: href

Copiar dibujos SVG usando xlink: href

Dibujar gráficos vectoriales escalables con D3 JavaScript Resumen

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 de JavaScript D3 para llegar programáticamente al 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 algunos elementos visuales realmente elegantes 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