D3.js - Introdução ao SVG

SVG significa Scalable Vector Graphics. SVG é um formato gráfico vetorial baseado em XML. Ele oferece opções para desenhar diferentes formas, como linhas, retângulos, círculos, elipses, etc. Portanto, projetar visualizações com SVG oferece mais poder e flexibilidade.

Recursos de SVG

Algumas das características mais importantes do SVG são as seguintes -

SVG é um formato de imagem baseado em vetor e é baseado em texto.
SVG é semelhante em estrutura ao HTML.
SVG pode ser representado como um Document object model.
As propriedades SVG podem ser especificadas como atributos.
SVG deve ter posições absolutas em relação à origem (0, 0).
O SVG pode ser incluído como está no documento HTML.

Um exemplo mínimo

Vamos criar uma imagem SVG mínima e incluí-la no documento HTML.

Step 1 - Crie uma imagem SVG e defina a largura como 300 pixels e a altura como 300 pixels.

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

</svg>

Aqui o svgtag inicia uma imagem SVG e tem largura e altura como atributos. A unidade padrão do formato SVG épixel.

Step 2 - Crie uma linha começando em (100, 100) e terminando em (200, 100) e defina a cor vermelha para a linha.

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

Aqui o line tag desenha uma linha e seus atributos x1, y1 refere-se ao ponto de partida e x2, y2refere-se ao ponto final. O atributo de estilo define a cor e a espessura da linha usando ostroke e a stroke-width estilos.

x1 - Esta é a coordenada x do primeiro ponto.
y1 - Esta é a coordenada y do primeiro ponto.
x2 - Esta é a coordenada x do segundo ponto.
y2 - Esta é a coordenada y do segundo ponto.
stroke - Cor da linha.
stroke-width - Espessura da linha.

Step 3 - Crie um documento HTML, “svg_line.html” e integre o SVG acima conforme mostrado abaixo -

<!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>

O programa acima produzirá o seguinte resultado.

SVG usando D3.js

Para criar SVG usando D3.js, vamos seguir as etapas fornecidas a seguir.

Step 1 - Crie um contêiner para armazenar a imagem SVG conforme mostrado abaixo.

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

Step 2- Selecione o contêiner SVG usando o método select () e injete o elemento SVG usando o método append (). Adicione os atributos e estilos usando os métodos attr () e style ().

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

Step 3 - Da mesma forma, adicione o line elemento dentro do svg elemento como mostrado abaixo.

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);

O código completo é o seguinte -

<!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>

O código acima produz o seguinte resultado.

Elemento Retângulo

Um retângulo é representado pelo <rect> tag conforme mostrado abaixo.

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

Os atributos de um retângulo são os seguintes -

x - Esta é a coordenada x do canto superior esquerdo do retângulo.
y - Esta é a coordenada y do canto superior esquerdo do retângulo.
width - Isso denota a largura do retângulo.
height - Isso denota a altura do retângulo.

Um retângulo simples em SVG é definido conforme explicado a seguir.

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

O mesmo retângulo pode ser criado dinamicamente conforme descrito abaixo.

<!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>

O código acima produzirá o seguinte resultado.

Elemento Círculo

Um círculo é representado pelo <circle> tag conforme explicado abaixo.

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

Os atributos do círculo são os seguintes -

cx - Esta é a coordenada x do centro do círculo.
cy - Esta é a coordenada y do centro do círculo.
r - Isso denota o raio do círculo.

Um círculo simples em SVG é descrito abaixo.

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

O mesmo círculo pode ser criado dinamicamente conforme descrito abaixo.

<!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>

O código acima produzirá o seguinte resultado.

Elemento Elipse

O elemento SVG Ellipse é representado pelo <ellipse> tag conforme explicado abaixo.

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

Os atributos de uma elipse são os seguintes -

cx - Esta é a coordenada x do centro da elipse.
cy - Esta é a coordenada y do centro da elipse.
rx - Este é o raio x do círculo.
ry - Este é o raio y do círculo.

Uma elipse simples no SVG é descrita abaixo.

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

A mesma elipse pode ser criada dinamicamente como abaixo,

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

O código acima produzirá o seguinte resultado.

↰ Previous page Next page ↱