Учебники

D3.js — API цветов

Март 22, 2018

Цвета отображаются в сочетании красного, зеленого и синего цветов. Цвета могут быть указаны следующими способами:

  • По названиям цветов
  • Как значения RGB
  • Как шестнадцатеричные значения
  • Как значения HSL
  • Как значения HWB

API-интерфейс d3-color предоставляет представления для различных цветов. Вы можете выполнять операции преобразования и манипуляции в 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 (спецификатор)
  • color.opacity
  • color.rgb ()
  • color.toString ()
  • color.displayable ()
  • d3.rgb (цвет)
  • d3.hsl (цвет)
  • d3.lab (цвет)
  • d3.hcl (цвет)
  • d3.cubehelix (цвет)

Давайте разберемся с каждым из этих методов Color API в деталях.

d3.color (спецификатор)

Он используется для анализа указанного цвета CSS и возврата цвета RGB или HSL. Если спецификатор не указан, возвращается ноль.

Пример. Рассмотрим следующий пример. 

<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>

Мы увидим следующий ответ на экране — 

1

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 Object Model. Давайте рассмотрим следующий пример. 

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

Мы увидим следующий ответ на нашем экране. 

rgb(0, 128, 0)

color.displayable ()

Возвращает true, если цвет отображается. Возвращает false, если значение цвета RGB меньше 0 или больше 255, или если непрозрачность не находится в диапазоне [0, 1]. Давайте рассмотрим следующий пример. 

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

Мы увидим следующий ответ на нашем экране. 

true

d3.rgb (цвет)

Этот метод используется для создания нового цвета 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 (цвет)

Он используется для создания нового цвета 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 (цвет)

Создает новый лабораторный цвет. Значения канала представляются как свойства ‘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 (цвет)

Создает новый цвет 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 (цвет)

Создает новый цвет 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>

Теперь запросите браузер, и мы увидим следующий ответ.

63
Share: