D3.js - Trasformazione SVG
SVG fornisce opzioni per trasformare un singolo elemento di forma SVG o un gruppo di elementi SVG. Supporti di trasformazione SVGTranslate, Scale, Rotate e Skew. Impariamo la trasformazione in questo capitolo.
Introduzione alla trasformazione SVG
SVG introduce un nuovo attributo, transformper supportare la trasformazione. I valori possibili sono uno o più dei seguenti,
Translate - Ci vogliono due opzioni, tx si riferisce alla traslazione lungo l'asse x e tysi riferisce alla traslazione lungo l'asse y. PerExample- tradurre (30 30).
Rotate - Ci vogliono tre opzioni, angle si riferisce all'angolo di rotazione, cx e cysi riferisce al centro della rotazione negli assi xey. Secx e cynon sono specificati, quindi il valore predefinito è l'origine corrente del sistema di coordinate. PerExample - ruotare (60).
Scale - Ci vogliono due opzioni, sx si riferisce al fattore di scala lungo l'asse x e sysi riferisce al fattore di scala lungo l'asse y. Qui,sy è opzionale e assume il valore di sx, se non è specificato. PerExample - scala (10).
Skew (SkewX and SkewY)- Ci vuole una sola opzione; ilskew-anglesi riferisce all'angolo lungo l'asse x per SkewX e l'angolo lungo l'asse y per SkewY. PerExample - obliquo (20).
Un esempio del rettangolo SVG con traslazione, che è descritto come segue:
<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>Il codice precedente produrrà il seguente risultato.
È possibile specificare più di una trasformazione per un singolo elemento SVG utilizzando lo spazio come separazione. Se viene specificato più di un valore, la trasformazione verrà applicata uno per uno in sequenza nell'ordine specificato.
<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>Il codice precedente produrrà il seguente risultato.
La trasformazione può essere applicata anche all'elemento del gruppo SVG. Ciò consente di trasformare la grafica complessa definita nell'SVG come descritto di seguito.
<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>Il codice precedente produrrà il seguente risultato.
Un esempio minimo
Per creare un'immagine SVG, provare a ridimensionarla e ruotarla utilizzando la trasformazione, seguiamo i passaggi indicati di seguito.
Step 1 - Crea un'immagine SVG e imposta la larghezza su 300 pixel e l'altezza su 300 pixel.
<svg width = "300" height = "300">
</svg>Step 2 - Crea un gruppo SVG.
<svg width = "300" height = "300">
<g>
</g>
</svg>Step 3 - Crea un rettangolo di lunghezza 60 e altezza 30 e riempilo di colore 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 cerchio di raggio 30 e riempilo con il colore rosso.
<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 - Aggiungi un attributo di trasformazione e aggiungi trasla e ruota come mostrato di seguito.
<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 - Creare un documento HTML, "svg_transform_rotate_group.html" e integrare l'SVG sopra come spiegato di seguito.
<!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>Il codice precedente produrrà il seguente risultato.
Trasformazione utilizzando D3.js
Per creare SVG utilizzando D3.js, seguiamo i passaggi indicati di seguito.
Step 1 - Crea un contenitore per contenere l'immagine SVG come spiegato di seguito.
<div id = "svgcontainer"></div>Step 2 - Crea un'immagine SVG come spiegato di seguito.
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
.append("svg")
.attr("width", width)
.attr("height", height);Step 3 - Crea un elemento di gruppo SVG e imposta gli attributi di traslazione e rotazione.
var group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");Step 4 - Crea un rettangolo SVG e aggiungilo all'interno del gruppo.
var rect = group
.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 60)
.attr("height", 30)
.attr("fill", "green")Step 5 - Crea un cerchio SVG e aggiungilo all'interno del gruppo.
var circle = group
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 30)
.attr("fill", "red")Il codice completo è il seguente:
<!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>Il codice precedente produrrà il seguente risultato.
Trasforma libreria
D3.js fornisce una libreria separata per gestire la trasformazione senza creare manualmente gli attributi di trasformazione. Fornisce metodi per gestire tutti i tipi di trasformazione. Alcuni dei metodi sonotransform(), translate(), scale(), rotate(), ecc. Puoi includere d3-transform nella tua pagina web utilizzando il seguente script.
<script src = "http://d3js.org/d3.v4.min.js"></script>
<script src = "d3-transform.js"></script>Nell'esempio sopra, il codice di trasformazione può essere scritto come mostrato di seguito:
var my_transform = d3Transform()
.translate([60, 60])
.rotate(30);
var group = svg
.append("g")
.attr("transform", my_transform);