D3.js interpolateString() function

Last Updated : 13 Feb, 2022

The intepolateString() function in D3.js is used to return the interpolator function between two strings. For each number in string “b” the function finds a number for it in string “a”, then it returns the interpolation of these numbers using Number interpolator function, and the remaining part of string “b” is used as a template.

Syntax:

d3.intepolateString(a, b);

Parameters: It takes two parameters:

a: It is a string of characters and numbers.
b: It is also a string of characters and numbers.

Returns: It returns the interpolator function.

Below given are a few examples of the above function.

Example 1:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, 
                 initial-scale=1.0">
  <title>Document</title>
</head>
<style>
</style>
<body>
  <!--fetching from CDN of D3.js -->
  <script type = "text/javascript" 
          src = 
"https://d3js.org/d3.v4.min.js">
  </script>
  <script>
    let s1="42 geeks 16";
    let s2="500 Geeks 10 for 20 geeks"
    let interpolatoreFunc=d3.interpolateString(s1, s2);
    /* Note that the string alphabets of string b are
      same as output but the Numbers are changed.*/
    console.log(interpolatoreFunc(0.25))
    console.log(interpolatoreFunc(5))
    console.log(interpolatoreFunc(0))
    console.log(interpolatoreFunc())
  </script>
</body>
</html>

Output:

Example 2:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, 
                 initial-scale=1.0">
  <title>Document</title>
</head>
<style>
</style>
<body>
  <!--Fetching from CDN of D3.js -->
  <script type = "text/javascript" 
          src = "https://d3js.org/d3.v4.min.js">
  </script>
  <script>
    try{
     // Trying numbers with this function
      console.log(d3.interpolateString(24, 15)(0.26))
      // If only string is given and no Number
      console.log(
d3.interpolateString("geeks", "for Geeks")(0.5))
      // If a is a number and b is a string
      console.log(
d3.interpolateString(24, "Geeks for geeks")(0.8))
      // If a is not given 
      console.log(
d3.interpolateString("13 geeks")(0.46))
      console.log(
typeof d3.interpolateString("2 asda", "13 geeks"))
    }
    catch(err){
      throw err;
    }
     
  </script>
</body>
</html>