how to obtain a complete clockwise rotation in D3
1
I want a square to complete a full clockwise rotation on itself, after a pause on the half of the rotation. The following code makes it doing an half rotation clockwise, and the other half counter-clockwise, contrary to what I expect.
var svg = d3.select('svg');
var s = svg.append("rect")
.attr("width", 50)
.attr("height", 50)
.attr("x", -25)
.attr("y", -25)
.attr("fill", "red")
.attr("transform", "translate(100,100)");
s
.transition()
.duration(1000)
.attr("transform", "translate(100,100) rotate(180)")
.transition()
.delay(1000)
.duration(1000)
.attr("transform", "translate(100,100) rotate(360)");
* {
ma