D3.js关于SVG(2)

SVG转化

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

Translate - 它有两个选项， tx沿x轴平移， ty沿y轴平移。
Rotate - 它有三个选项， angle指旋转角度， cx和cy指的是x和y轴旋转的中心。如果未指定cx和cy ，则默认为坐标系的当前原点。
Scale - 它有两个选项， sx沿x轴的比例因子， sy沿y轴的比例因子。这里， sy是可选的，如果没有指定，则它取sx的值。元素的长宽属性值与sx和sy的值相乘。
Skew (SkewX and SkewY) - 只需一个选项; skew-angle指的是SkewX沿x轴的角度和SkewY沿y轴的角度。这个属性可以拆分为skewX和skewY。注意的是，X和Y需要大写

示例一（translate）：

<html>
   <head>
      <script src = "https://d3js.org/d3.v6.js"></script>
   </head>
   <body>
      <svg width = "210" height = "210">
         <rect x="10" y="10" width="20" height="20" fill="red" transform="translate(100,100)"></rect>
      </svg>
   </body>
</html>

代码实际效果如下：
<svg width = "210" height = "150"><rect x="0" y="0" width="20" height="20" fill="red" transform="translate(100,100)"></rect></svg>

可以明显看出，矩形的位置在（100,100）这个地方。

示例二（rotate）：

<html>
   <head>
      <script src = "https://d3js.org/d3.v6.js"></script>
   </head>
   <body>
      <svg width = "210" height = "110">
         <rect x="20" y="20" width="20" height="20" fill="red" transform="rotate(50 20 20)"></rect>
      </svg>
   </body>
</html>

代码实际效果如下：
<svg width = "210" height = "110"><rect x="20" y="20" width="20" height="20" fill="red" transform="rotate(50 20 20)"></rect></svg>

可以明显看出，矩形在（20,20）位置，围绕（20,20）这个点旋转了50度。

示例三（scale）：

<html>
   <head>
      <script src = "https://d3js.org/d3.v6.js"></script>
   </head>
   <body>
      <svg width = "210" height = "80">
         <rect x="0" y="0" width="20" height="20" fill="red" transform="scale(11,1.2)"></rect>
      </svg>
   </body>
</html>

代码实际效果如下：
<svg width = "210" height = "80"><rect x="0" y="0" width="20" height="20" fill="red" transform="scale(11,1.2)"></rect></svg>

原本长宽都为20的矩形，设置scale后，width实际值变为了1120=220，height实际值变为了201.2=24。

示例四（skew）:

<html>
   <head>
      <script src = "https://d3js.org/d3.v6.js"></script>
   </head>
   <body>
      <svg width = "210" height = "210">
         <rect x="0" y="0" width="40" height="40" fill="red" transform="skewX(20)"></rect>
      </svg>
   </body>
</html>

代码实际效果如下：
<svg width = "210" height = "210"><rect x="0" y="0" width="40" height="40" fill="red" transform="skewX(20)"></rect></svg>

可以看出，图形变成了平行四边形。

使用d3.js进行svg转换

步骤如下：
（1）创建一个容器来保存SVG图像。
（2）创建svg图像。
（3）用attr方法为图像添加transfrom属性。
（4）为transfrom属性设置相应的转换效果。
示例：

<html>
   <head>
      <script src = "https://d3js.org/d3.v6.js"></script>
   </head>
   <body>
    <div id="one">
    </div>
    <script>
    var width = 210;
    var height = 210;
     var o = d3.select("#one");
     var s = o.append("svg").attr("width",width).attr("height",height);
     var c = s.append("circle");
     c.attr("r",10)
       .attr("fill","red")
       .attr("transform","translate(100,100) scale(5) skewX(10)") ;
    </script>
   </body>
</html>

示例中，在div容器中添加了一个圆形svg图像，并对圆形进行了移动，比例和沿角度拉扯的效果。