Весы – чрезвычайно гибкая особенность D3.JS. Хотя во многих случаях наша потребность в том, чтобы иметь функцию, которая отображает одно значение в Домен к одному значению в Диапазон Иногда его можно удобно иметь сопоставление от одного ко многим ценностям.
Предположим, например, для того, чтобы нам нужно отобразить один вход в набор значений, таких как цвет и радиус для создания простого рассеяния, где точки имеют радиус и цвет в зависимости от входного значения из набора данных.
В этих случаях способна иметь составную масштаб, это то, что нам нужно, и благодарность D3 предоставляет эту функцию из коробки. Просто пропустите два (или более) объектов к функции диапазона, а D3 сделает все остальное.
Вот простой пример:
const myScale = scaleLinear()
.domain([0, 100])
.range([
{color: '#4c0080', radius:'15px'},
{color: '#43a1ad', radius:'150px'}
]);
Этот код вернет функцию, которая преобразует наши значения (в этом случае от 0 до 100) до объекта со всеми значениями соответствующим образом интерполизированы.
Например:
myScale(41); // => {color: 'rgb(72, 66, 146)', radius: '70.35px'}
Простая, но супер удобная особенность, особенно учитывая, что нам не нужно указывать интерполятор, потому что библиотека найдет это для нас. Кроме того, мы не привязаны к одноуровневым объектам, но глубокие объекты будут работать так же.
Кредиты
Изображение по Маркус Списке Отказ
Первоначально опубликовано на мой блог Отказ
Оригинал: “https://dev.to/aurelio/compound-scales-in-d3-js-5fkj”