D3.js SVG 转换
SVG 提供了转换单个 SVG 形状元素或一组 SVG 元素的选项。 SVG 变换支持
平移、缩放、旋转和
倾斜。让我们在本章中学习转换。
SVG 转换简介
SVG 引入了一个新属性
transform 来支持转换。可能的值是以下一项或多项，
Translate-它有两个选项，tx 表示沿 x 轴的平移，ty 表示沿 y 轴的平移.对于示例− translate(30 30).
Rotate-需要三个选项，angle 表示旋转角度，cx 和 cy 表示中心x 轴和 y 轴的旋转。如果未指定 cx 和 cy，则默认为坐标系的当前原点。对于示例-旋转（60）。
Scale-它有两个选项，sx 指的是沿 x 轴的缩放因子，sy 指的是沿 x 轴的缩放因子y 轴。此处，sy 是可选的，如果未指定，则取sx 的值。对于示例-scale(10)。
Skew（SkewX 和 SkewY）-它需要一个选项； skew-angle 是指 SkewX 沿 x 轴的角度和 SkewY 沿 y 轴的角度。对于示例-skewx(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 图像，尝试使用变换对其进行缩放和旋转，让我们按照以下步骤进行操作。
步骤 1-创建一个 SVG 图像并将宽度设置为 300 像素，高度设置为 300 像素。
<svg width = "300" height = "300">
</svg>
步骤 2-创建一个 SVG 组。
<svg width = "300" height = "300">
<g>
</g>
</svg>
步骤 3-创建一个长为 60，高为 30 的矩形，并用绿色填充。
<svg width = "300" height = "300">
<g>
<rect x = "20"
y = "20"
width = "60"
height = "30"
fill = "green">
</rect>
</g>
</svg>
步骤 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>
步骤 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>
第 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 进行转换
要使用 D3.js 创建 SVG，让我们按照以下步骤操作。
步骤 1-创建一个容器来保存 SVG 图像，如下所述。
<div id = "svgcontainer"></div>
第 2 步-创建一个 SVG 图像，如下所述。
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
.append("svg")
.attr("width", width)
.attr("height", height);
步骤 3-创建一个 SVG 组元素并设置平移和旋转属性。
var group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");
步骤 4-创建一个 SVG 矩形并将其附加到组内。
var rect = group
.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 60)
.attr("height", 30)
.attr("fill", "green")
步骤 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);
