D3.js - преобразование SVG
SVG предоставляет параметры для преобразования одного элемента формы SVG или группы элементов SVG. Преобразование SVG поддерживаетTranslate, Scale, Rotate а также Skew. Давайте изучим трансформацию в этой главе.
Введение в преобразование SVG
SVG представляет новый атрибут, transformдля поддержки трансформации. Возможные значения - одно или несколько из следующих:
Translate - Требуется два варианта, tx относит перевод по оси x и tyотносится к перемещению по оси y. ЗаExample- перевести (30 30).
Rotate - Требуется три варианта, angle относится к углу поворота, cx а также cyотносится к центру вращения по осям x и y. Еслиcx а также cyне указаны, то по умолчанию используется текущее начало координат системы координат. ЗаExample - повернуть (60).
Scale - Требуется два варианта, sx относится к коэффициенту масштабирования по оси x и syотносится к коэффициенту масштабирования по оси y. Вот,sy не является обязательным и принимает значение sx, если не указано. ЗаExample - шкала (10).
Skew (SkewX and SkewY)- Требуется единичный вариант; тоskew-angleотносится к углу по оси X для SkewX и углу по оси Y для SkewY. ЗаExample - скьюкс (20).
Пример прямоугольника SVG с переводом, который описывается следующим образом:
<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>Приведенный выше код даст следующий результат.
Для одного элемента SVG можно указать несколько преобразований, используя пробел в качестве разделения. Если указано более одного значения, преобразование будет применяться одно за другим последовательно в указанном порядке.
<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>Приведенный выше код даст следующий результат.
Преобразование также может быть применено к элементу группы SVG. Это позволяет преобразовывать сложную графику, определенную в SVG, как описано ниже.
<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>Приведенный выше код даст следующий результат.
Минимальный пример
Чтобы создать изображение SVG, попробуйте масштабировать и повернуть его с помощью преобразования, давайте выполним шаги, указанные ниже.
Step 1 - Создайте изображение SVG и установите ширину 300 пикселей и высоту 300 пикселей.
<svg width = "300" height = "300">
</svg>Step 2 - Создайте группу SVG.
<svg width = "300" height = "300">
<g>
</g>
</svg>Step 3 - Создайте прямоугольник длиной 60 и высотой 30 и залейте его зеленым цветом.
<svg width = "300" height = "300">
<g>
<rect x = "20"
y = "20"
width = "60"
height = "30"
fill = "green">
</rect>
</g>
</svg>Step 4 - Создайте круг радиусом 30 и залейте его красным цветом.
<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 - Добавьте атрибут преобразования и добавьте перевод и поворот, как показано ниже.
<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 - Создайте HTML-документ svg_transform_rotate_group.html и интегрируйте указанный выше SVG, как описано ниже.
<!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>Приведенный выше код даст следующий результат.
Преобразование с использованием D3.js
Чтобы создать SVG с помощью D3.js, давайте сделаем шаги, указанные ниже.
Step 1 - Создайте контейнер для изображения SVG, как описано ниже.
<div id = "svgcontainer"></div>Step 2 - Создайте изображение SVG, как описано ниже.
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
.append("svg")
.attr("width", width)
.attr("height", height);Step 3 - Создайте элемент группы SVG и установите атрибуты translate и rotate.
var group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");Step 4 - Создайте прямоугольник SVG и добавьте его в группу.
var rect = group
.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 60)
.attr("height", 30)
.attr("fill", "green")Step 5 - Создайте круг SVG и добавьте его в группу.
var circle = group
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 30)
.attr("fill", "red")Полный код выглядит следующим образом -
<!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>Приведенный выше код даст следующий результат.
Библиотека преобразований
D3.js предоставляет отдельную библиотеку для управления преобразованием без ручного создания атрибутов преобразования. Он предоставляет методы для обработки всех типов преобразований. Некоторые из методовtransform(), translate(), scale(), rotate()и т. д. Вы можете включить d3-transform на вашей веб-странице, используя следующий скрипт.
<script src = "http://d3js.org/d3.v4.min.js"></script>
<script src = "d3-transform.js"></script>В приведенном выше примере код преобразования можно записать, как показано ниже -
var my_transform = d3Transform()
.translate([60, 60])
.rotate(30);
var group = svg
.append("g")
.attr("transform", my_transform);