Categories
D3.js教程

D3.js-SVG转换

D3.js-SVG转换


SVG提供了用于转换单个SVG形状元素或SVG元素组的选项。 SVG转换支持Translate,Scale,RotateSkew 。让我们在本章中学习转换。

SVG转型简介

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

  • 翻译-需要两个选项, tx表示沿x轴的平移, ty表示沿y轴的平移。对于实施例-平移(30 30)。

  • 旋转-共有三个选项,角度表示旋转角度,角度cxcy表示在x和y轴上的旋转中心。如果未指定cxcy ,则默认为坐标系的当前原点。对于实施例-旋转(60)。

  • 缩放-有两个选项, sx表示沿x轴的缩放比例, sy表示沿y轴的缩放比例。此处, sy是可选的,如果未指定,则采用sx的值。对于实施例-标度(10)。

  • 偏斜(SkewX和SkewY) -它只有一个选项;偏斜角是指SkewX沿x轴的角度和SkewY沿y轴的角度。对于实施例-如果skewX(20)。

带有翻译的SVG矩形的示例,如下所示-

<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
   

   
      <svg width="300" height="300">
         <rect x="20" y="20" width="60" height="60" fill="green" transform="translate(30 30)">
         </rect>
      </svg>
   

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

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

<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
   

   
      <svg width="300" height="300">
         <rect x="20" y="20" width="60" height="60" fill="green" transform="translate(60 60) rotate(45)">
         </rect>
      </svg>
   

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

转换也可以应用于SVG组元素。如下所述,这可以转换SVG中定义的复杂图形。

<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
   

   
      <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"></circle>
         </g>
      </svg>
   

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

最小的例子

要创建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"></circle>
   </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"></circle>
   </g>
</svg>

步骤6-创建一个HTML文档“ svg_transform_rotate_group.html”,并按照下面的说明集成上述SVG。

<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   

   
      <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"></circle>
            </g>
         </svg>
      </div>
   

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

使用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")

完整的代码如下-

<title>SVG rectangle</title>
      <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   

   
      <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>
      

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

转换库

D3.js提供了一个单独的库来管理转换,而无需手动创建转换属性。它提供了处理所有类型转换的方法。其中一些方法是transform(),translate(),scale(),rotate()等。您可以使用以下脚本在网页中包含d3-transform

<script src="https://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);
error: 内容受到保护 !!