Блог

Существует ли встроенный метод для генерации монохроматических цветов с помощью библиотеки d3 при вводе цвета?

У меня есть поиск, но я ничего не нахожу.

Ближайший способ, который я сейчас понимаю, это:

1. Преобразуйте предоставленный цвет в формат HSL
2. Выберите насыщенность и сохраните ее как s1
3. Найдите минимальную насыщенность с помощью s1-1 и сохраните ее как s2
4. Интерполировать s1 и s2 на 10 с помощью d3
5. Используйте абсолютное значение интерполированной насыщенности для генерации цветовой палитры, фиксируя (H) ue и (L) ight

Есть ли какой-либо эффективный способ сделать это?

Для этого есть несколько способов. Один из них использует последовательную шкалу.

Например, учитывая указанный вами цвет (скажем, синий) в формате HSL…

 const color = d3.hsl("blue");
  

… все, что вам нужно, это:

 const scale = d3.scaleSequential(t => d3.hsl(color.h, color.s * t, color.l)   "");
  

Значение, которое вы передадите интерполятору, изменяется от 0 до 1. Как вы можете видеть, мы умножим значение насыщенности на это число ( color.s * t ) , так что оно фактически перейдет от 0 к своему нормальному значению.

Вот демонстрация создания палитры с 40 значениями:

 const color = d3.hsl("blue");
const scale = d3.scaleSequential(t => d3.hsl(color.h, color.s * t, color.l)   "").domain([0, 40]);
d3.select("body")
  .selectAll(null)
  .data(d3.range(40))
  .enter()
  .append("div")
  .style("background-color", d => scale(d))  

 div {
  width: 10px;
  height: 50px;
  display: inline-block;
  margin-right: 2px;
}  

 <script src="https://d3js.org/d3.v6.min.js"></script>