Posts

Showing posts from March 13, 2019

how to obtain a complete clockwise rotation in D3

Image
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