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

问题描述

当我尝试使用D3.js库正确执行旋转动画时遇到问题。问题与我要旋转元素的点有关。

这里是一个小提琴，我用来表示我的意思（慢动作）： http://jsfiddle.net/74mCb/

似乎问题的根源在这里：

  .attr（transform，rotate（-60,150,130 ））; 
  

然后我这样旋转：

  .attr（transform，rotate（40 150,130））; 
  

我希望针的针踵保持在原位（旋转中心）

解决方案

p>这是有点棘手掌握（我不完全理解它自己），但D3需要一些帮助知道如何内插在表示你的旋转的两个字符串之间。

  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 使这个数据驱动。

http://jsfiddle.net/SHF2M/

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!

解决方案

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/

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