d3.js svg 转换 -ag捕鱼王app官网

svg 提供了转换单个 svg 形状元素或一组 svg 元素的选项。svg 转换支持translate、scale、rotate和skew。本章我们学习svg转换。

svg 转换介绍

svg 引入了一个新属性，transform , 来支持转换。可能的值是以下一项或多项，

• translate - 它有两个选项，tx是指沿 x 轴的平移，ty是指沿 y 轴的平移。例如：translate(30 30)。
• rotate- 它需要三个选项，angle 是指旋转角度，cx和cy是指在 x 和 y 轴上的旋转中心。如果未指定cx和cy，则默认为坐标系的当前原点。例如：rotate(60)。
• scale - 它有两个选项，sx是指沿 x 轴的缩放因子，sy是指沿 y 轴的缩放因子。此处，sy是可选的，如果未指定，则采用sx的值。例如：scale(10)。
• skew (skewx 和 skewy) - 它需要一个选项；skew-angle指的 skewx 沿 x 轴的角度和 skewy 沿 y 轴的角度。 例如 - skewx(20)。例如：skewx(20)。

带有平移的 svg 矩形示例，代码如下

上面的代码将产生以下结果。

可以使用空格作为分隔，为单个 svg 元素指定多个转换。如果指定了多个值，则转换将按照指定的顺序依次应用。

上面的代码将产生以下结果。

转换也可以应用于 svg 组元素。 这允许转换在 svg 中定义的复杂图形，如下所示。

上述代码运行结果如下

一个最小的例子

要创建 svg 图像，请尝试使用变换对其进行缩放和旋转，让我们按照以下步骤操作。

步骤 1 - 创建一个 svg 图像并将宽度设置为 300 像素，将高度设置为 300 像素。

步骤 2- 创建一个 svg 组。

步骤 3 - 创建一个长 60 高 30 的矩形并用绿色填充它。

步骤 4 - 创建一个半径为 30 的圆并用红色填充它。

步骤 5 - 添加变换属性并添加平移和旋转，如下所示。

步骤 6- 创建一个 html 文档，并整合上述 svg，如下所示。

上面的代码将产生以下结果

使用 d3.js 进行转换

要使用 d3.js 创建 svg，让我们按照下面给出的步骤操作。

步骤 3 - 创建一个容器来保存 svg 图像，如下所述。

步骤 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")

完整的代码如下