Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
215 views
in Technique[技术] by (71.8m points)

javascript - D3.js animate rotation

I'm having trouble when I try to correctly execute a rotation animation using the D3.js library. The problem has to do with the point at which I want to rotate the element about.

Here is a fiddle I made to show what I mean (in slow motion): http://jsfiddle.net/74mCb/

It seems like the source of the problem lies here:

.attr("transform", "rotate(-60, 150,130)");

And then I rotate it like so:

.attr("transform", "rotate(40 150,130)");

I would like the butt of the needle to stay in position (to be the center of rotation), could someone please explain what I am doing wrong?

Thanks!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

This is a bit tricky to grasp (I don't fully understand it myself) but D3 needs some help knowing how to interpolate between the two strings that represent your rotation.

function turnNeedle()
{

    needle
      .transition()
      .duration(2000)
      .attrTween("transform", tween);

    function tween(d, i, a) {
      return d3.interpolateString("rotate(-60, 150, 130)", "rotate(60, 150, 130)");
    }

}

d is the datum, i is the index, a is the attribute in case you want to make this data-driven.

http://jsfiddle.net/SHF2M/


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...