在SVG中旋转图形，需要设置各个图形的旋转中心点

在SVG中旋转图形，需要设置各个图形的旋转中心点；

基本语法源自CSS，如：

div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate(7deg); /* Firefox */-webkit-transform:rotate(7deg); /* Safari 和 Chrome */-o-transform:rotate(7deg); /* Opera */}

d3旋转一组图形，需要设置各自旋转中心点：

<script>
var dataset = [
{x: 0, y:0}, {x: 0, y:1}, {x: 0, y:2}, {x: 0, y:3}, {x: 0, y:4},
{x: 1, y:0}, {x: 1, y:1}, {x: 1, y:2}, {x: 1, y:3}, {x: 1, y:4},
{x: 2, y:0}, {x: 2, y:1}, {x: 2, y:2}, {x: 2, y:3}, {x: 2, y:4},
{x: 3, y:0}, {x: 3, y:1}, {x: 3, y:2}, {x: 3, y:3}, {x: 3, y:4},
{x: 4, y:0}, {x: 4, y:1}, {x: 4, y:2}, {x: 4, y:3}, {x: 4, y:4},
];

var width = 440,
height = 440;

var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);


svg.selectAll("rect cube")
.data(dataset)
.enter()
.append("rect")
.attr("class", "cube")
.attr("width", 40)
.attr("height", 40)
.attr("fill", "teal")
.attr("transform", function (d, i) {
return "rotate(" + (Math.random() * i * 10) + " " + (d.x * 80 + 20) + "," + (d.y * 80 + 20) + ")";
})
.attr("x", function (d) {
return d.x * 80 ;
})
.attr("y", function (d) {
return d.y * 80 ;
});

</script>