D3.js - Transformação SVG
O SVG oferece opções para transformar um único elemento de forma SVG ou grupo de elementos SVG. Suporta transformação SVGTranslate, Scale, Rotate e Skew. Vamos aprender sobre transformação neste capítulo.
Introdução à Transformação SVG
SVG apresenta um novo atributo, transformpara apoiar a transformação. Os valores possíveis são um ou mais dos seguintes,
Translate - São duas opções, tx refere-se à translação ao longo do eixo x e tyrefere-se à translação ao longo do eixo y. ParaExample- traduzir (30 30).
Rotate - São três opções, angle refere-se ao ângulo de rotação, cx e cyrefere-se ao centro da rotação nos eixos xey. E secx e cynão são especificados, então o padrão é a origem atual do sistema de coordenadas. ParaExample - girar (60).
Scale - São duas opções, sx refere-se ao fator de escala ao longo do eixo x e syrefere-se ao fator de escala ao longo do eixo y. Aqui,sy é opcional e leva o valor de sx, se não for especificado. ParaExample - escala (10).
Skew (SkewX and SkewY)- Leva uma única opção; askew-anglerefere-se ao ângulo ao longo do eixo x para SkewX e o ângulo ao longo do eixo y para SkewY. ParaExample - skewx (20).
Um exemplo do retângulo SVG com traduzir, que é descrito a seguir -
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "300" height = "300">
<rect x = "20"
y = "20"
width = "60"
height = "60"
fill = "green"
transform = "translate(30 30)">
</rect>
</svg>
</body>
</html>O código acima produzirá o seguinte resultado.
Mais de uma transformação pode ser especificada para um único elemento SVG usando espaço como separação. Se mais de um valor for especificado, a transformação será aplicada um a um sequencialmente na ordem especificada.
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "300" height = "300">
<rect x = "20"
y = "20"
width = "60"
height = "60"
fill = "green"
transform = "translate(60 60) rotate(45)">
</rect>
</svg>
</body>
</html>O código acima produzirá o seguinte resultado.
A transformação também pode ser aplicada ao elemento de grupo SVG. Isso permite transformar gráficos complexos definidos no SVG conforme descrito abaixo.
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "300" height = "300">
<g transform = "translate(60,60) rotate(30)">
<rect x = "20"
y = "20"
width = "60"
height = "30"
fill = "green">
</rect>
<circle cx = "0"
cy = "0"
r = "30"
fill = "red"/>
</g>
</svg>
</body>
</html>O código acima produzirá o seguinte resultado.
Um exemplo mínimo
Para criar uma imagem SVG, tente dimensioná-la e girá-la usando a transformação, vamos seguir as etapas fornecidas a seguir.
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>Step 2 - Crie um grupo SVG.
<svg width = "300" height = "300">
<g>
</g>
</svg>Step 3 - Crie um retângulo de comprimento 60 e altura 30 e preencha com a cor verde.
<svg width = "300" height = "300">
<g>
<rect x = "20"
y = "20"
width = "60"
height = "30"
fill = "green">
</rect>
</g>
</svg>Step 4 - Crie um círculo de raio 30 e preencha com a cor vermelha.
<svg width = "300" height = "300">
<g>
<rect x = "20"
y = "20"
width = "60"
height = "30"
fill = "green">
</rect>
<circle cx = "0"
cy = "0"
r = "30"
fill = "red"/>
</g>
</svg>Step 5 - Adicione um atributo de transformação e adicione translação e rotação conforme mostrado abaixo.
<svg width = "300" height = "300">
<g transform = "translate(60,60) rotate(30)">
<rect x = "20"
y = "20"
width = "60"
height = "60"
fill = "green">
</rect>
<circle cx = "0"
cy = "0"
r = "30"
fill = "red"/>
</g>
</svg>Step 6 - Crie um documento HTML, “svg_transform_rotate_group.html” e integre o SVG acima conforme explicado 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">
<g transform = "translate(60,60) rotate(30)">
<rect x = "20"
y = "20"
width = "60"
height = "60"
fill = "green">
</rect>
<circle cx = "0"
cy = "0"
r = "30"
fill = "red"/>
</g>
</svg>
</div>
</body>
</html>O código acima produzirá o seguinte resultado.
Transformação 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 explicado a seguir.
<div id = "svgcontainer"></div>Step 2 - Crie uma imagem SVG conforme explicado abaixo.
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
.append("svg")
.attr("width", width)
.attr("height", height);Step 3 - Crie um elemento de grupo SVG e defina os atributos de translação e rotação.
var group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");Step 4 - Crie um retângulo SVG e anexe-o dentro do grupo.
var rect = group
.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 60)
.attr("height", 30)
.attr("fill", "green")Step 5 - Crie um círculo SVG e anexe-o dentro do grupo.
var circle = group
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 30)
.attr("fill", "red")O código completo é o seguinte -
<!DOCTYPE html>
<html lang = "en">
<head>
<title>SVG rectangle</title>
<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);
var group = svg.append("g")
.attr("transform", "translate(60, 60) rotate(30)");
var rect = group.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 60)
.attr("height", 30)
.attr("fill", "green")
var circle = group
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 30)
.attr("fill", "red")
</script>
</div>
</body>
</html>O código acima produzirá o seguinte resultado.
Biblioteca de transformação
D3.js fornece uma biblioteca separada para gerenciar a transformação sem criar manualmente os atributos de transformação. Ele fornece métodos para lidar com todos os tipos de transformação. Alguns dos métodos sãotransform(), translate(), scale(), rotate(), etc. Você pode incluir d3-transform em sua página da web usando o seguinte script.
<script src = "http://d3js.org/d3.v4.min.js"></script>
<script src = "d3-transform.js"></script>No exemplo acima, o código de transformação pode ser escrito conforme mostrado abaixo -
var my_transform = d3Transform()
.translate([60, 60])
.rotate(30);
var group = svg
.append("g")
.attr("transform", my_transform);