D3.js - Introducción a SVG

SVG significa Scalable Vector Graphics. SVG es un formato de gráficos vectoriales basado en XML. Proporciona opciones para dibujar diferentes formas, como líneas, rectángulos, círculos, elipses, etc. Por lo tanto, diseñar visualizaciones con SVG le brinda más poder y flexibilidad.

Características de SVG

Algunas de las características más destacadas de SVG son las siguientes:

SVG es un formato de imagen basado en vectores y está basado en texto.
SVG tiene una estructura similar a HTML.
SVG se puede representar como un Document object model.
Las propiedades SVG se pueden especificar como atributos.
SVG debe tener posiciones absolutas relativas al origen (0, 0).
SVG se puede incluir tal cual en el documento HTML.

Un ejemplo mínimo

Creemos una imagen SVG mínima e incluyamos en el documento HTML.

Step 1 - Cree una imagen SVG y establezca el ancho en 300 píxeles y la altura en 300 píxeles.

<svg width = "300" height = "300">

</svg>

Aquí el svgLa etiqueta inicia una imagen SVG y tiene el ancho y el alto como atributos. La unidad predeterminada del formato SVG espixel.

Step 2 - Cree una línea que comience en (100, 100) y termine en (200, 100) y establezca el color rojo para la línea.

<line x1 = "100" y1 = "100" x2 = "200" y2 = "200" 
   style = "stroke:rgb(255,0,0);stroke-width:2"/>

Aquí el line etiqueta dibuja una línea y sus atributos x1, y1 se refiere al punto de partida y x2, y2se refiere al punto final. El atributo de estilo establece el color y el grosor de la línea mediante elstroke y el stroke-width estilos.

x1 - Esta es la coordenada x del primer punto.
y1 - Ésta es la coordenada y del primer punto.
x2 - Esta es la coordenada x del segundo punto.
y2 - Esta es la coordenada y del segundo punto.
stroke - Color de la línea.
stroke-width - Espesor de la línea.

Step 3 - Cree un documento HTML, "svg_line.html" e integre el SVG anterior como se muestra a continuación -

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <div id = "svgcontainer">
         <svg width = "300" height = "300">
            <line x1 = "100" y1 = "100" 
               x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);
               stroke-width:2"/>
         </svg>
      </div>
      <p></p>
      <p></p>
   </body>
</html>

El programa anterior producirá el siguiente resultado.

SVG con D3.js

Para crear SVG usando D3.js, sigamos los pasos que se indican a continuación.

Step 1 - Cree un contenedor para contener la imagen SVG como se indica a continuación.

<div id = "svgcontainer"></div>

Step 2- Seleccione el contenedor SVG usando el método select () e inyecte el elemento SVG usando el método append (). Agregue los atributos y estilos usando los métodos attr () y style ().

var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
   .append("svg").attr("width", width).attr("height", height);

Step 3 - Del mismo modo, agregue el line elemento dentro del svg elemento como se muestra a continuación.

svg.append("line")
   .attr("x1", 100)
   .attr("y1", 100)
   .attr("x2", 200) 
   .attr("y2", 200)
   .style("stroke", "rgb(255,0,0)")
   .style("stroke-width", 2);

El código completo es el siguiente:

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <div id = "svgcontainer">
      </div>
      <script language = "javascript">
         var width = 300;
         var height = 300;
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         svg.append("line")
            .attr("x1", 100)
            .attr("y1", 100)
            .attr("x2", 200)
            .attr("y2", 200)
            .style("stroke", "rgb(255,0,0)")
            .style("stroke-width", 2);
      </script>
   </body>
</html>

El código anterior produce el siguiente resultado.

Elemento de rectángulo

Un rectángulo está representado por <rect> etiqueta como se muestra a continuación.

<rect x = "20" y = "20" width = "300" height = "300"></rect>

Los atributos de un rectángulo son los siguientes:

x - Esta es la coordenada x de la esquina superior izquierda del rectángulo.
y - Esta es la coordenada y de la esquina superior izquierda del rectángulo.
width - Esto denota el ancho del rectángulo.
height - Esto denota la altura del rectángulo.

Un rectángulo simple en SVG se define como se explica a continuación.

<svg width = "300" height = "300">
   <rect x = "20" y = "20" width = "300" height = "300" fill = "green"></rect>
</svg>

El mismo rectángulo se puede crear dinámicamente como se describe a continuación.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         //Create SVG element
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         //Create and append rectangle element
         svg.append("rect")
            .attr("x", 20)
            .attr("y", 20)
            .attr("width", 200)
            .attr("height", 100)
            .attr("fill", "green");
      </script>
   </body>
</html>

El código anterior producirá el siguiente resultado.

Elemento circular

Un círculo está representado por el <circle> etiqueta como se explica a continuación.

<circle cx = "200" cy = "50" r = "20"/>

Los atributos del círculo son los siguientes:

cx - Esta es la coordenada x del centro del círculo.
cy - Esta es la coordenada y del centro del círculo.
r - Esto denota el radio del círculo.

A continuación se describe un círculo simple en SVG.

<svg width = "300" height = "300">
   <circle cx = "200" cy = "50" r = "20" fill = "green"/>
</svg>

El mismo círculo se puede crear dinámicamente como se describe a continuación.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         //Create SVG element
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         //Append circle 
         svg.append("circle")
            .attr("cx", 200)
            .attr("cy", 50)
            .attr("r", 20)
            .attr("fill", "green");
      </script>
   </body>
</html>

El código anterior producirá el siguiente resultado.

Elemento elipse

El elemento SVG Elipse está representado por el <ellipse> etiqueta como se explica a continuación.

<ellipse cx = "200" cy = "50" rx = "100" ry = "50"/>

Los atributos de una elipse son los siguientes:

cx - Esta es la coordenada x del centro de la elipse.
cy - Esta es la coordenada y del centro de la elipse.
rx - Este es el radio x del círculo.
ry - Este es el radio y del círculo.

A continuación se describe una elipse simple en el SVG.

<svg width = "300" height = "300">
   <ellipse cx = "200" cy = "50" rx = "100" ry = "50" fill = "green" />
</svg>

La misma elipse se puede crear dinámicamente como se muestra a continuación,

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         svg.append("ellipse")
            .attr("cx", 200)
            .attr("cy", 50)
            .attr("rx", 100)
            .attr("ry", 50)
            .attr("fill", "green")
      </script>
   </body>
</html>

El código anterior producirá el siguiente resultado.

↰ Previous page Next page ↱