D3.js pow.clamp() Function

Last Updated : 28 Sep, 2021

The pow.clamp() function in d3.js is used to enable the clamp or disable the clamp only if the clamp is specified. The range of the return value may be outside the given range if the clamp is disabled.

Syntax:

pow.clamp(clamp);

Property Values: This function accepts single parameter as given above and described below.

clamp: It accepts a boolean value of true or false.

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

Example1: When clamp is set to false.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport"
        path1tent="width=device-width, 
        initial-scale=1.0"/> 
    <script src=
    "https://d3js.org/d3.v4.min.js">
    </script> 
    <script src=
    "https://d3js.org/d3-color.v1.min.js">
    </script> 
    <script src=
    "https://d3js.org/d3-interpolate.v1.min.js">
    </script> 
    <script src=
    "https://d3js.org/d3-scale-chromatic.v1.min.js">
    </script> 
</head> 
<body> 
    <h2 style="color: green;">
        Geeks for geeks
        </h2>
    
<p>pow.clamp() Function </p>

    <script> 
        // Calling the .scalePow() function 
        var x = d3.scalePow() 
            .domain([10, 100]) 
            .range([0, 5])         
            .clamp(false);

        // Calling pow() and .invert() function 
        var a = x(2); 
        var b = x.invert(15); 
        document.write("<h3>"+a+"</h3>"); 
        document.write("<h3>"+b+"</h3>");
    </script> 
    </script> 
</body> 
</html>

Output:

Example 2: When clamp is set to true.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport"
        path1tent="width=device-width, 
        initial-scale=1.0"/> 
    <script src=
    "https://d3js.org/d3.v4.min.js">
    </script> 
    <script src=
    "https://d3js.org/d3-color.v1.min.js">
    </script> 
    <script src=
    "https://d3js.org/d3-interpolate.v1.min.js">
    </script> 
    <script src=
    "https://d3js.org/d3-scale-chromatic.v1.min.js">
    </script> 
</head> 
<body> 
    <h2 style="color:green;">Geeks for geeks</h2>
    
<p>pow.clamp() Function </p>

    <script>   
        // Calling the .scalePow() function 
        var x = d3.scalePow() 
            .domain([10, 100]) 
            .range([0, 5])          
            .clamp(true);
  
        // Calling pow() and .invert() function 
        var a = x(12); 
        var b = x.invert(15); 
        var c = x.invert(150); 
        document.write("<h3>"+a+"</h3>"); 
        document.write("<h3>"+b+"</h3>");
        document.write("<h3>"+c+"</h3>");
    </script> 
    </script> 
</body> 
</html>

Output:

D3.js scalePow() Function

tarun007

Improve

Article Tags :

D3.js pow.clamp() Function

Similar Reads

Thank You!

What kind of Experience do you want to share?