d3js学习——svg的转换

svg 引入了一个新属性，transform 为支持转换，可能的值有：

• translate(tx ty) - 它有两个选项， tx沿x轴平移， ty沿y轴平移。 例如 - translate（30 30）。
• rotate(angle cx cy) - 它有三个选项， angle指旋转角度， cx和cy指的是x和y轴旋转的中心。 如果未指定cx和cy ，则默认为坐标系的当前原点。 例如 - rotate（60）。
• scale(sx sy) - 它有两个选项， sx沿x轴的比例因子， sy沿y轴的比例因子。 这里， sy是可选的，如果没有指定，则它取sx的值。 例如 - scale（10）。
• skew (skew-angle) - 只需一个选项; skew-angle指的是SkewX沿x轴的角度和SkewY沿y轴的角度。 例如 - skewx（20）。

<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 width="300" height="300">
  <g transform="translate(60 60) rotate(30)">
      <rect
        x="20"
        y="20"
        width="60"
        height="60"
        fill="green"
        transform="translate(60 60) rotate(45)"
      ></rect>
		<circle cx="0" r="30" fill="red">
		</circle>
	</g>
</svg>

使用d3js创建svg

let group = d3
    .select(".ground")
    .append("svg")
    .attr("width", 300)
    .attr("height", 300)
    .append("g");
  group
    .attr("transform", "translate(60,60) rotate(30)")
    .append("rect")
    .attr("x", 20)
    .attr("y", 20)
    .attr("width", 60)
    .attr("height", "30")
    .attr("fill", "purple");
  group
    .append("circle")
    .attr("cx", 0)
    .attr("cy", 0)
    .attr("r", 35)
    .attr("fill", "red");

单独管理转换的库——d3Transform

<script src = "http://d3js.org/d3.v4.min.js"></script>
<script src = "d3-transform.js"></script>

const my_transform = d3Transform().translate([60,60]).rotate(30);
const group = svg.append("g").attr("transform", my_transform)