D3.js interpolateString() function

0 0 1 minute read

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 zambiatek 16";
    let s2="500 Geeks 10 for 20 zambiatek"
    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("zambiatek", "for Geeks")(0.5))
      // If a is a number and b is a string
      console.log(
d3.interpolateString(24, "Geeks for zambiatek")(0.8))
      // If a is not given 
      console.log(
d3.interpolateString("13 zambiatek")(0.46))
      console.log(
typeof d3.interpolateString("2 asda", "13 zambiatek"))
    }
    catch(err){
      throw err;
    }
     
  </script>
</body>
</html>

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!