D3.js - 顏色 API

顏色透過組合紅色、綠色和藍色來顯示。顏色可以透過以下幾種不同的方式指定：

透過顏色名稱
作為 RGB 值
作為十六進位制值
作為 HSL 值
作為 HWB 值

d3-color API 提供了各種顏色的表示形式。您可以在 API 中執行轉換和操作操作。讓我們詳細瞭解這些操作。

配置 API

您可以使用以下指令碼直接載入 API。

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script>

</script>

基本操作

讓我們瞭解 D3 中的基本顏色操作。

將顏色值轉換為 HSL - 要將顏色值轉換為 HSL，請使用以下示例 -

var convert = d3.hsl("green");

您可以將色相旋轉 45°，如下所示。

convert.h + =  45;

同樣，您也可以更改飽和度級別。要淡化顏色值，您可以更改不透明度值，如下所示。

convert.opacity = 0.5;

顏色 API 方法

以下是一些最重要的顏色 API 方法。

d3.color(specifier)
color.opacity
color.rgb()
color.toString()
color.displayable()
d3.rgb(color)
d3.hsl(color)
d3.lab(color)
d3.hcl(color)
d3.cubehelix(color)

讓我們詳細瞭解每個顏色 API 方法。

d3.color(specifier)

它用於解析指定的 CSS 顏色並返回 RGB 或 HSL 顏色。如果未給出 specifier，則返回 null。

示例 - 讓我們考慮以下示例。

<script>
   var color = d3.color("green");  // asign color name directly
   console.log(color);
</script>

我們將在螢幕上看到以下響應 -

{r: 0, g: 128, b: 0, opacity: 1}

color.opacity

如果我們想淡化顏色，我們可以更改不透明度值。它的範圍是 [0, 1]。

示例 - 讓我們考慮以下示例。

<script>
   var color = d3.color("green");
   console.log(color.opacity);
</script>

我們將在螢幕上看到以下響應 -

color.rgb()

它返回顏色的 RGB 值。讓我們考慮以下示例。

<script>
   var color = d3.color("green");
   console.log(color.rgb());
</script>

我們將在螢幕上看到以下響應。

{r: 0, g: 128, b: 0, opacity: 1}

color.toString()

它返回一個根據 CSS 物件模型規範表示顏色的字串。讓我們考慮以下示例。

<script>
   var color = d3.color("green");
   console.log(color.toString());
</script>

我們將在螢幕上看到以下響應。

rgb(0, 128, 0)

color.displayable()

如果顏色可顯示，則返回 true。如果 RGB 顏色值小於 0 或大於 255，或者如果不透明度不在 [0, 1] 範圍內，則返回 false。讓我們考慮以下示例。

<script>
   var color = d3.color("green");
   console.log(color.displayable());
</script>

我們將在螢幕上看到以下響應。

true

d3.rgb(color)

此方法用於構造一個新的 RGB 顏色。讓我們考慮以下示例。

<script>
   console.log(d3.rgb("yellow"));
   console.log(d3.rgb(200,100,0));
</script>

我們將在螢幕上看到以下響應。

{r: 255, g: 255, b: 0, opacity: 1}
{r: 200, g: 100, b: 0, opacity: 1}

d3.hsl(color)

它用於構造一個新的 HSL 顏色。值在返回的例項上作為 h、s 和 l 屬性公開。讓我們考慮以下示例。

<script>
   var hsl = d3.hsl("blue");
   console.log(hsl.h + =  90);
   console.log(hsl.opacity = 0.5);
</script>

我們將在螢幕上看到以下響應。

330
0.5

d3.lab(color)

它構造一個新的 Lab 顏色。通道值在返回的例項上作為“l”、“a”和“b”屬性公開。

<script>
   var lab = d3.lab("blue");
   console.log(lab);
</script>

我們將在螢幕上看到以下響應。

{l: 32.29701093285073, a: 79.18751984512221, b: -107.8601617541481, opacity: 1}

d3.hcl(color)

構造一個新的 HCL 顏色。通道值在返回的例項上作為 h、c 和 l 屬性公開。讓我們考慮以下示例。

<script>
   var hcl = d3.hcl("blue");
   console.log(hcl);
</script>

我們將在螢幕上看到以下響應。

{h: 306.2849380699878, c: 133.80761485376166, l: 32.29701093285073, opacity: 1}

d3.cubehelix(color)

構造一個新的 Cubehelix 顏色。值在返回的例項上作為 h、s 和 l 屬性公開。讓我們考慮以下示例。

<script>
   var hcl = d3.hcl("blue");
   console.log(hcl);
</script>

我們將在螢幕上看到以下響應，

{h: 236.94217167732103, s: 4.614386868039719, l: 0.10999954957200976, opacity: 1}

工作示例

讓我們建立一個新的網頁 - color.html 來執行所有顏色 API 方法。完整的程式碼清單如下所示。

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 colors API</h3>
      <script>
         var color = d3.color("green");
         console.log(color);
         console.log(color.opacity);
         console.log(color.rgb());
         console.log(color.toString());
         console.log(color.displayable());
         console.log(d3.rgb("yellow"));
         console.log(d3.rgb(200,100,0));
         var hsl = d3.hsl("blue");
         console.log(hsl.h + =  90);
         console.log(hsl.opacity = 0.5);
         var lab = d3.lab("blue");
         console.log(lab);
         var hcl = d3.hcl("blue");
         console.log(hcl);
         var cube = d3.cubehelix("blue");
         console.log(cube);
      </script>
   </body>
</html>

現在，請求瀏覽器，我們將看到以下響應。

列印頁面