D3.js 中 SVG 转换
SVG 提供了转换单个 SVG 形状元素或一组 SVG 元素的选项。SVG 转换支持Translate、Scale、Rotate和Skew。
SVG 转换介绍
SVG 引入了一个新属性，transform来支持转换。可能的值是以下一项或多项，
Translate - 它有两个选项，tx是指沿 x 轴的平移，ty是指沿 y 轴的平移。对于实施例-平移（30 30）。
旋转- 它需要三个选项，角度是指旋转角度，cx和cy是指在 x 和 y 轴上的旋转中心。如果未指定cx和cy，则默认为坐标系的当前原点。对于实施例-旋转（60）。
Scale - 它有两个选项，sx是指沿 x 轴的缩放因子，sy是指沿 y 轴的缩放因子。在这里，sy是可选的，如果没有指定，它采用sx的值。对于实施例-标度（10）。
Skew (SkewX and SkewY) - 它需要一个选项；的倾斜角指的是沿着x轴为如果skewX和沿y轴为SkewY的角度的角度。对于实施例-如果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); 
