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 =
</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>
|
Output: