CODEWITHSUNDEEP
javascriptd3.js
GingerJim
GingerJim

Reputation: 3907

How to make an svg object move in a circular trajectory with a constant speed, D3.js

I want to make an object move around a centre in a circular trajectory. Following is my code. I expect a constant speed when the object move on the arc.However the movement speed is not constant, it accelerate in the middle of the transition and it is very slow at the beginning and end of the transition. I do not why, please help

function generatePointOnCircle(angle,w,h){//in degree
  var rads = angle/180*Math.PI;
  var r = Math.sqrt(w*w + h*h);
  var x = Math.cos(rads)*r;
  var y = Math.sin(rads)*r;

  return {x:x,y:y};
}

function generateDefenders(svg){

  var distance = 73;

  the_target_object.transition().duration(10000)
  .attrTween("transform",function(d,i){
    var it = d3.interpolateRound(1,360);
    return function(t){

    var p = generatePointOnCircle(it(t),distance);
    return "translate(" + (p.x + width/2) + "," + (p.y + height/2)+")";
  }

  }).remove();
}

Upvotes: 0

Views: 288

Answers (1)

GingerJim
GingerJim

Reputation: 3907

Just need to add a linear ease function to the transition, like this

the_target_object.transition().duration(10000).ease("linear") .....

By default, the ease function is "cubic-in-out".

Upvotes: 2

Related Questions