D3.js旋转动画 [英] D3.js animate rotation

问题描述

我在遇到麻烦时，我尝试使用D3.js库正确执行一个旋转动画。该问题与在该欲绕元件的点做

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.

下面是我提出来说明我的意思（慢动作）小提琴： http://jsfiddle.net/74mCb/

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?

谢谢！

推荐答案

这是一个有点棘手把握（我不完全理解自己），但D3需要一些帮助了解如何在两个字符串重新$之间插值p $ psent你的转动。

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 为基准， I 是索引， A 是如果你想使这个数据驱动的属性。

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/

这篇关于D3.js旋转动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！