CODEWITHSUNDEEP
javascriptd3.js
Tums
Tums

Reputation: 589

How get the returned value of d3.ease?

I am using d3 Version 3 and I am trying to use d3's ease function for animation. According to the function's definition it has a return value

function ease(type: 'cubic-in'): (t: number) => number;

I am expecting a number as the return value to use it in my computation. But, now how can I cast the return value of the ease function to a number. Is there any other way to achieve this?

Thank you.

Upvotes: 4

Views: 164

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102219

d3.ease already returns a number.

You just need to pass the value you want to d3.ease:

d3.ease(type)(value);

Here is a demo with "cubic-in", as in your question:

function ease(value) {
  return d3.ease("cubic-in")(value);
}

console.log("ease for 0.1: " + ease(4));
console.log("ease for 0.5: " + ease(0.5));
console.log("ease for 0.8: " + ease(0.8));
console.log("ease for 0.95: " + ease(0.95));
<script src="https://d3js.org/d3.v3.min.js"></script>

Keep in mind that the passed value and the returned value are between 0 and 1. According to the API:

An easing function takes the current parameterized time value t in the domain [0,1], and maps it to another value in a similar range.

Upvotes: 4

Related Questions