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.