D3.js - SVG-Transformation
SVG bietet Optionen zum Transformieren eines einzelnen SVG-Formelements oder einer Gruppe von SVG-Elementen. SVG-Transformation unterstütztTranslate, Scale, Rotate und Skew. Lassen Sie uns in diesem Kapitel die Transformation lernen.
Einführung in die SVG-Transformation
SVG führt ein neues Attribut ein: transformTransformation unterstützen. Die möglichen Werte sind einer oder mehrere der folgenden:
Translate - Es gibt zwei Möglichkeiten, tx bezieht sich auf die Translation entlang der x-Achse und tybezieht sich auf die Verschiebung entlang der y-Achse. ZumExample- übersetzen (30 30).
Rotate - Es gibt drei Möglichkeiten, angle bezieht sich auf Drehwinkel, cx und cybezieht sich auf das Rotationszentrum in der x- und y-Achse. Wenncx und cynicht angegeben werden, wird standardmäßig der aktuelle Ursprung des Koordinatensystems verwendet. ZumExample - drehen (60).
Scale - Es gibt zwei Möglichkeiten, sx bezieht sich auf den Skalierungsfaktor entlang der x-Achse und sybezieht sich auf den Skalierungsfaktor entlang der y-Achse. Hier,sy ist optional und nimmt den Wert von an sx, wenn es nicht angegeben ist. ZumExample - Skala (10).
Skew (SkewX and SkewY)- Es ist eine einzige Option erforderlich. dasskew-anglebezieht sich auf den Winkel entlang der x-Achse für SkewX und den Winkel entlang der y-Achse für SkewY. ZumExample - Skewx (20).
Ein Beispiel für das SVG-Rechteck mit translate, das wie folgt beschrieben wird:
<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>Der obige Code liefert das folgende Ergebnis.
Für ein einzelnes SVG-Element kann mehr als eine Transformation angegeben werden, wobei Leerzeichen als Trennung verwendet werden. Wenn mehr als ein Wert angegeben wird, wird die Transformation nacheinander in der angegebenen Reihenfolge angewendet.
<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>Der obige Code liefert das folgende Ergebnis.
Die Transformation kann auch auf das SVG-Gruppenelement angewendet werden. Dies ermöglicht die Transformation komplexer Grafiken, die in der SVG definiert sind, wie unten beschrieben.
<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>Der obige Code liefert das folgende Ergebnis.
Ein minimales Beispiel
Um ein SVG-Bild zu erstellen, versuchen Sie es zu skalieren und mithilfe der Transformation zu drehen. Führen Sie die folgenden Schritte aus.
Step 1 - Erstellen Sie ein SVG-Bild und stellen Sie die Breite auf 300 Pixel und die Höhe auf 300 Pixel ein.
<svg width = "300" height = "300">
</svg>Step 2 - Erstellen Sie eine SVG-Gruppe.
<svg width = "300" height = "300">
<g>
</g>
</svg>Step 3 - Erstellen Sie ein Rechteck mit der Länge 60 und der Höhe 30 und füllen Sie es mit grüner Farbe.
<svg width = "300" height = "300">
<g>
<rect x = "20"
y = "20"
width = "60"
height = "30"
fill = "green">
</rect>
</g>
</svg>Step 4 - Erstellen Sie einen Kreis mit dem Radius 30 und füllen Sie ihn mit roter Farbe.
<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 - Fügen Sie ein Transformationsattribut hinzu und fügen Sie übersetzen und drehen wie unten gezeigt hinzu.
<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 - Erstellen Sie ein HTML-Dokument mit dem Namen "svg_transform_rotate_group.html" und integrieren Sie die obige SVG wie unten erläutert.
<!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>Der obige Code liefert das folgende Ergebnis.
Transformation mit D3.js.
Führen Sie die folgenden Schritte aus, um SVG mit D3.js zu erstellen.
Step 1 - Erstellen Sie einen Container für das SVG-Bild, wie unten erläutert.
<div id = "svgcontainer"></div>Step 2 - Erstellen Sie ein SVG-Bild wie unten erläutert.
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
.append("svg")
.attr("width", width)
.attr("height", height);Step 3 - Erstellen Sie ein SVG-Gruppenelement und legen Sie die Attribute zum Übersetzen und Drehen fest.
var group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");Step 4 - Erstellen Sie ein SVG-Rechteck und hängen Sie es innerhalb der Gruppe an.
var rect = group
.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 60)
.attr("height", 30)
.attr("fill", "green")Step 5 - Erstellen Sie einen SVG-Kreis und hängen Sie ihn innerhalb der Gruppe an.
var circle = group
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 30)
.attr("fill", "red")Der vollständige Code lautet wie folgt:
<!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>Der obige Code liefert das folgende Ergebnis.
Bibliothek transformieren
D3.js bietet eine separate Bibliothek zum Verwalten der Transformation, ohne die Transformationsattribute manuell zu erstellen. Es bietet Methoden für alle Arten von Transformationen. Einige der Methoden sindtransform(), translate(), scale(), rotate()usw. Sie können einschließen d3-transform in Ihrer Webseite mit dem folgenden Skript.
<script src = "http://d3js.org/d3.v4.min.js"></script>
<script src = "d3-transform.js"></script>Im obigen Beispiel kann der Transformationscode wie folgt geschrieben werden:
var my_transform = d3Transform()
.translate([60, 60])
.rotate(30);
var group = svg
.append("g")
.attr("transform", my_transform);