Función D3.js pow.clamp()

La función pow.clamp() en d3.js se usa para habilitar o deshabilitar la abrazadera solo si se especifica la abrazadera. El rango del valor devuelto puede estar fuera del rango dado si la abrazadera está deshabilitada.

Sintaxis:

pow.clamp(clamp);

Valores de propiedad: esta función acepta un solo parámetro como se indicó anteriormente y se describe a continuación.

  • clamp: Acepta un valor booleano de verdadero o falso.

A continuación se dan algunos ejemplos de la función dada anteriormente.

Ejemplo 1: cuando la abrazadera se establece en falso.

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>

Producción:

Ejemplo 2: cuando la abrazadera se establece en verdadero.

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>

Producción:

Publicación traducida automáticamente

Artículo escrito por TARuN y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *