Цвет заливки D3 с использованием пользовательской шкалы - PullRequest
Новая
       22

Цвет заливки D3 с использованием пользовательской шкалы

2 голосов
/ 12 июня 2019

У меня есть этот код, и я хотел бы раскрасить дугу относительно значения, передавая диапазон двух цветов (т. Е. ['# F00', '# ff0]).

Я не могу найти способ объявить шкалу, которая создает мне правильные цвета.

И я тоже ничего не могу найти в документах ...

Это кодовое поле, где я хотел бы реализовать это

https://codepen.io/adeveloperdiary/pen/OydzpG

Вот как я пытался безуспешно 

 const colorRange = ['#f00', '#0f0'];
 
 const colorScale = d3.scaleOrdinal()
    .range([0, 100])
    .domain(colorRange);
    
 console.log(colorScale(75));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.2.0/d3.min.js"></script>

1 Ответ

3 голосов
/ 12 июня 2019

Вам нужна линейная шкала, а не порядковая шкала.Также поменяйте местами домен и диапазон: 

const colorRange = ['#f00', '#0f0'];

const colorScale = d3.scaleLinear()
  .domain([0, 100])
  .range(colorRange);

console.log(colorScale(75));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.2.0/d3.min.js"></script>

Вот кодовая ручка, которую вы связали с этой шкалой (используя D3 v3): https://codepen.io/anon/pen/RzNYvy

...