Open In App

D3.js pow.rangeRound() Function

Improve
Improve
Like Article
Like
Save
Share
Report

The pow.rangeRound() function is used set the range of the scale to the specified array of values along with this it internally sets the interpolator to interpolatorRound.

Syntax:

pow.rangeRound([range]);

Parameters: This function takes a single parameter that is given above and described below.

  • [range]: This is an array that contains the range for the domain specified.

Return Values: This function does not return anything.

Below given are a few examples of the function given above.

Example 1: When elements in range array are of type number.




<!DOCTYPE html> 
<html lang="en"
<head
    <meta charset="UTF-8" /> 
    <meta name="viewport"
        path1tent="width=device-width, 
        initial-scale=1.0"/> 
    <script src=
    </script
    <script src=
    </script
    <script src=
    </script
    <script src=
    </script
</head
<body
    <h2 style="color: green;">
        Geeks for geeks</h2>
    <p>pow.rangeRound() Function </p>
    <script
        var pow = d3.scalePow()
                    // Domain ranges -1, +1
                        .domain([-1, +1])
                    // Range for the domain
.rangeRound([10, 20, 30, 40, 50, 60, 70, 80, 90]);
       
        document.write("<br/><div>");
        document.write("<p>With rangeRound()");
        document.write("<h3>"+pow(10.5)+"</h3>");
        document.write("<h3>"+pow(2)+"</h3>");
        document.write("<h3>"+pow(11.5)+"</h3>");
        document.write("<h3>"+pow(-1)+"</h3>");
        document.write("<h3>"+pow(1.15)+"</h3>");
        document.write("<h3>"+pow(5)+"</h3></div>");
   
        var pow = d3.scaleLinear()
                    // Domain ranges -1, +1
                        .domain([-1, +1])
                    // Range for the domain
.range([10, 20, 30, 40, 50, 60, 70, 80, 90])
   
        document.write("<br/><div>");
        document.write("<p>Without rangeRound()");
        document.write("<h3>"+pow(10.5)+"</h3>");
        document.write("<h3>"+pow(2)+"</h3>");
        document.write("<h3>"+pow(11.5)+"</h3>");
        document.write("<h3>"+pow(-1)+"</h3>");
        document.write("<h3>"+pow(1.15)+"</h3>");
        document.write("<h3>"+pow(5)+"</h3></div>");
    </script
</body
</html>


Output:

Example 2: When elements in range array are of type String.




<!DOCTYPE html> 
<html lang="en"
<head
    <meta charset="UTF-8" /> 
    <meta name="viewport"
        path1tent="width=device-width, 
        initial-scale=1.0"/> 
    <script src=
    </script
    <script src=
    </script
    <script src=
    </script
    <script src=
    </script
</head
<body
    <h2 style="color: green;">Geeks for geeks</h2>
    <p>pow.rangeRound() Function </p>
    <script
        var pow = d3.scalePow()
                    // Domain ranges -1, +1
                        .domain([-1, +1])
                    // Range for the domain
.rangeRound(["green", "blue", "red", "black", "white"]);
       
        document.write("<br/><div>");
        document.write(
"<p>d3.rangeRound() does not work with range of type string");
        document.write("<h3>"+pow(10.5)+"</h3>");
        document.write("<h3>"+pow(2)+"</h3>");
        document.write("<h3>"+pow(11.5)+"</h3>");
    </script
</body
</html>


Output:



Last Updated : 24 Aug, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads