--- id: 587d7fab367417b2b2512bda title: Створення лінійної шкали за допомогою D3 challengeType: 6 forumTopicId: 301483 dashedName: create-a-linear-scale-with-d3 --- # --description-- Стовпчикові та розсіяні діаграми наносять дані безпосередньо на полотно SVG. Однак, якщо висота стовпчика або однієї з точок даних була б більшою за значення висоти або ширини SVG, то вона виходила б за межі області SVG. У D3 існують шкали, за допомогою яких можна відобразити дані. `scales` - це функції, що вказують програмі, як саме потрібно зіставити пікселі полотна SVG із набором необроблених точок даних. Наприклад, скажімо, у вас є полотно SVG розміром 100x500, і ви хочете накреслити Валовий внутрішній продукт (ВВП) для ряду країн. Набір цифр буде в діапазоні мільярдів або трильйонів доларів. Ви надаєте D3 тип шкали, щоб розповісти їй, як потрібно розмістити великі значення ВВП на цій площі розміром 100x500. Навряд чи ви б створювали необроблені дані так. Перше ніж створювати його, ви встановлюєте шкалу для всього свого набору даних, щоб значення `x` та `y`відповідали ширині та висоті полотна. D3 має кілька типів шкал. Існує метод D3 `scaleLinear()` для лінійної шкали, який зазвичай використовується з кількісними даними: ```js const scale = d3.scaleLinear() ``` За замовчуванням шкала використовує зв'язок ідентичності. Значення вхідних даних таке ж, як і значення вихідних даних. В окремому завданні розповідається про те, як це змінити. # --instructions-- Щоб створити лінійну шкалу потрібно змінити змінну `scale`. Потім встановіть змінну `output` у шкалі, яка викликається з вхідним аргументом `50`. # --hints-- У `h2` текст повинен бути `50`. ```js assert($('h2').text() == '50'); ``` Ваш код повинен використовувати метод `scaleLinear()`. ```js assert(code.match(/\.scaleLinear/g)); ``` Змінна `output` повинна викликати `scale` з аргументом `50`. ```js assert(output == 50 && code.match(/scale$\s*?50\s*?$/g)); ``` # --seed-- ## --seed-contents-- ```html ``` # --solutions-- ```html ```