Transform rotate direction

[Whitney Dunn]

I am using transform rotate on a line pointer on a dial with a 270 degree arc.

            pointer.transition()

.duration(3000)

                .ease('linear')

.attr('transform', 'rotate(' +newAngle +')');

The problem is that the pointer will take the shortest path to the newAngle value.  Sometimes that is outside the arc of the dial.  Anyway to force the transform rotate to travel in a certain direction?

[Mike Bostock]

Yes, use attrTween:

  http://bl.ocks.org/mbostock/3305854

Mike

[marc fawzi]

 The magic sauce there comes from d3.interpolateString :)  Very powerful in that it keeps your transitions within the D3 model, as opposed to doing stuff with CSS3 transitions 

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[John Delacour]

On 22/5/13 at 23:27, dunn.w...@gmail.com (Whitney Dunn) wrote:

>...Anyway to force the transform rotate to travel in a certain
>direction?

On 22/5/13 at 23:36, mi...@ocks.org (Mike Bostock) wrote:

>Yes, use attrTween...

You might like to look at this beginner's solution as well,
where an element is rotated 360° at two different speeds using attrTween:

<http://bl.ocks.org/JohnDelacour/5588283>

JD

[Whitney Dunn]

Thanks for all the help.  Got it working.