d3.js color.brighter()用法及代碼示例

D3.js 的 color.brighter() 函數用於複製在原始顏色中具有一些額外亮度或暗度的顏色。

用法:

color.brighter(k)

參數：這個函數隻接受一個參數 k 是原始顏色所需的亮度量。它是整數值。

返回值：它返回對象。

範例1：當沒有給出k的值時

HTML


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, 
                     initial-scale=1.0"/>
        <title>D3.js color.brighter() Function</title>
    </head>
    <style>
        .box {
            height:100px;
            width:100px;
        }
        .box1 {
            height:100px;
            width:100px;
        }
    </style>
    <body>
        Color without color.brighter() property
        <div class="box"></div>
        Color with color.brighter() property
        <div class="box1"></div>
        <!--fetching from CDN of D3.js -->
        <script type="text/javascript" src=
                "https://d3js.org/d3.v4.min.js">
        </script>
        <script>
            let box = document.querySelector(".box");
            let box1 = document.querySelector(".box1");
            var color = d3.color("green");
            box.style.backgroundColor = 
              `rgb(${color.r},${color.g},${color.b})`;
            var color = color.brighter();
            box1.style.backgroundColor = 
              `rgb(${color.r},${color.g},${color.b})`;
        </script>
    </body>
</html>

輸出：

範例2：

HTML


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport"
              content="width=device-width, 
                       initial-scale=1.0" />
        <title>D3.js color.brighter() Function</title>
    </head>
    <style>
        .box {
            height:100px;
            width:100px;
        }
        .box1 {
            height:100px;
            width:100px;
        }
    </style>
    <body>
        Color without color.brighter() property
        <div class="box"></div>
        Color with color.brighter(10) property
        <div class="box1"></div>
        <!--fetching from CDN of D3.js -->
        <script type="text/javascript" src=
                "https://d3js.org/d3.v4.min.js">
        </script>
        <script>
            let box = document.querySelector(".box");
            let box1 = document.querySelector(".box1");
            var color = d3.color("green");
            box.style.backgroundColor = 
              `rgb(${color.r},${color.g},${color.b})`;
            var color = color.brighter(10);
            box1.style.backgroundColor = 
              `rgb(${color.r},${color.g},${color.b})`;
        </script>
    </body>
</html>

輸出：

範例3：當 k < 0 時

HTML


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" 
              content="width=device-width, 
                       initial-scale=1.0" />
        <title>D3.js color.brighter() Function</title>
    </head>
    <style>
        .box {
            height:100px;
            width:100px;
        }
        .box1 {
            height:100px;
            width:100px;
        }
    </style>
    <body>
        Color without color.brighter() property
        <div class="box"></div>
        Color with color.brighter(-10) property
        <div class="box1"></div>
        <!--fetching from CDN of D3.js -->
        <script type="text/javascript" src=
                "https://d3js.org/d3.v4.min.js">
        </script>
        <script>
            let box = document.querySelector(".box");
            let box1 = document.querySelector(".box1");
            var color = d3.color("green");
            box.style.backgroundColor = 
              `rgb(${color.r},${color.g},${color.b})`;
            var color = color.brighter(-10);
            box1.style.backgroundColor =
              `rgb(${color.r},${color.g},${color.b})`;
        </script>
    </body>
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自tarun007大神的英文原創作品 D3.js color.brighter() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。