Open In App

D3.js pow.rangeRound() Function

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.

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:


Article Tags :