Rotate svg: line rotated at one of its ends in d3

Question

I am trying to change the axis of my graph ( svg:line elements) when I click a button. I want the transition to occur like the dials of a watch.

Line

 d3.select(".yAxis").transition().duration(500).attr("transform", function() { var value = invert?0:90; return "rotate("+value+" "+x1+","+y1+")"; }); 

performs translation and rotation at the same time, which does not serve my purpose.

I want the line to simply rotate around (x1, y1) and not translate or rotate.

How can I do it?

For clarity, here is the fiddle

Answer 1

Well, this problem really aroused my curiosity, but I think I found a solution. Basically conversion interpolation does not do what you expect, and you should use an interpolation string .

 d3.select(".xAxis") .transition() .duration(500) .attrTween("transform", function() { var startAngle = invert ?-90:0; var endAngle = invert?0:-90; return d3.interpolateString( "rotate("+startAngle+" "+ x +" "+ y +")", "rotate("+endAngle+" "+ x +" "+ y +")" ); }); 

Also, an interpolation call can be taken into account between two axes, since they have the same center of rotation.

script: http://jsfiddle.net/KVUUb/