89 lines
3.6 KiB
Markdown
89 lines
3.6 KiB
Markdown
|
---
|
|||
|
|
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
|
|||
|
|
<body>
|
|||
|
|
<script>
|
|||
|
|
// Add your code below this line
|
|||
|
|
|
|||
|
|
const scale = undefined; // Create the scale here
|
|||
|
|
const output = scale(); // Call scale with an argument here
|
|||
|
|
|
|||
|
|
// Add your code above this line
|
|||
|
|
|
|||
|
|
d3.select("body")
|
|||
|
|
.append("h2")
|
|||
|
|
.text(output);
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --solutions--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<body>
|
|||
|
|
<script>
|
|||
|
|
|
|||
|
|
const scale = d3.scaleLinear();
|
|||
|
|
const output = scale(50);
|
|||
|
|
|
|||
|
|
d3.select("body")
|
|||
|
|
.append("h2")
|
|||
|
|
.text(output);
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
```
|