D3.js - Transformación SVG
SVG ofrece opciones para transformar un único elemento de forma SVG o un grupo de elementos SVG. Soportes de transformación SVGTranslate, Scale, Rotate y Skew. Aprendamos la transformación en este capítulo.
Introducción a la transformación SVG
SVG introduce un nuevo atributo, transformpara apoyar la transformación. Los valores posibles son uno o más de los siguientes:
Translate - Se necesitan dos opciones, tx se refiere a la traslación a lo largo del eje xy tyse refiere a la traslación a lo largo del eje y. porExample- traducir (30 30).
Rotate - Se necesitan tres opciones, angle se refiere al ángulo de rotación, cx y cyse refiere al centro de rotación en los ejes xey. Sicx y cyno se especifican, entonces toma por defecto el origen actual del sistema de coordenadas. porExample - girar (60).
Scale - Se necesitan dos opciones, sx se refiere al factor de escala a lo largo del eje xy syse refiere al factor de escala a lo largo del eje y. Aquí,sy es opcional y toma el valor de sx, si no se especifica. porExample - escala (10).
Skew (SkewX and SkewY)- Toma una sola opción; laskew-anglese refiere al ángulo a lo largo del eje x para SkewX y al ángulo a lo largo del eje y para SkewY. porExample - sesgo (20).
Un ejemplo del rectángulo SVG con traducción, que se describe a continuación:
<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>El código anterior producirá el siguiente resultado.
Se puede especificar más de una transformación para un solo elemento SVG utilizando el espacio como separación. Si se especifica más de un valor, la transformación se aplicará una por una secuencialmente en el orden especificado.
<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>El código anterior producirá el siguiente resultado.
La transformación también se puede aplicar al elemento de grupo SVG. Esto permite transformar gráficos complejos definidos en SVG como se describe a continuación.
<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>El código anterior producirá el siguiente resultado.
Un ejemplo mínimo
Para crear una imagen SVG, intente escalarla y rotarla usando la transformación, sigamos los pasos que se indican a continuación.
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>Step 2 - Crea un grupo SVG.
<svg width = "300" height = "300">
<g>
</g>
</svg>Step 3 - Crea un rectángulo de largo 60 y alto 30 y rellénalo de color verde.
<svg width = "300" height = "300">
<g>
<rect x = "20"
y = "20"
width = "60"
height = "30"
fill = "green">
</rect>
</g>
</svg>Step 4 - Crea un círculo de radio 30 y rellénalo de color rojo.
<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 - Agregue un atributo de transformación y agregue traducir y rotar como se muestra a continuación.
<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 - Cree un documento HTML, "svg_transform_rotate_group.html" e integre el SVG anterior como se explica 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">
<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>El código anterior producirá el siguiente resultado.
Transformación 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 explica a continuación.
<div id = "svgcontainer"></div>Step 2 - Cree una imagen SVG como se explica a continuación.
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
.append("svg")
.attr("width", width)
.attr("height", height);Step 3 - Cree un elemento de grupo SVG y establezca los atributos de traducción y rotación.
var group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");Step 4 - Cree un rectángulo SVG y añádalo dentro del grupo.
var rect = group
.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 60)
.attr("height", 30)
.attr("fill", "green")Step 5 - Crea un círculo SVG y añádelo dentro del grupo.
var circle = group
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 30)
.attr("fill", "red")El código completo es el siguiente:
<!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>El código anterior producirá el siguiente resultado.
Transformar biblioteca
D3.js proporciona una biblioteca separada para administrar la transformación sin crear manualmente los atributos de transformación. Proporciona métodos para manejar todo tipo de transformación. Algunos de los métodos sontransform(), translate(), scale(), rotate(), etc. Puede incluir d3-transform en su página web usando el siguiente script.
<script src = "http://d3js.org/d3.v4.min.js"></script>
<script src = "d3-transform.js"></script>En el ejemplo anterior, el código de transformación se puede escribir como se muestra a continuación:
var my_transform = d3Transform()
.translate([60, 60])
.rotate(30);
var group = svg
.append("g")
.attr("transform", my_transform);