107 lines
3.4 KiB
Markdown
107 lines
3.4 KiB
Markdown
|
---
|
|||
|
|
id: 587d7fac367417b2b2512bdb
|
|||
|
|
title: Налаштування домену й діапазону на шкалі
|
|||
|
|
challengeType: 6
|
|||
|
|
forumTopicId: 301491
|
|||
|
|
dashedName: set-a-domain-and-a-range-on-a-scale
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# --description--
|
|||
|
|
|
|||
|
|
За замовчуванням, масштаби використовують зв'язки ідентичності. Це означає, що вхідне значення відповідає вихідному значенню. Проте масштаби можуть бути набагато гнучкішими та цікавими.
|
|||
|
|
|
|||
|
|
Скажімо, набір даних має значення від 50 до 480. Це вхідна інформація для масштабування, також відома як <dfn>domain</dfn>.
|
|||
|
|
|
|||
|
|
Відобразіть ці точки вздовж осі `x` на полотні SVG у діапазоні від 10 одиниць до 500. Цю вихідну інформацію також називають <dfn>range</dfn>.
|
|||
|
|
|
|||
|
|
Методи `domain()` та `range()` встановлюють ці значення для шкали. Обидва методи сприймають масив щонайменше двох елементів як аргумент. Наприклад:
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
scale.domain([50, 480]);
|
|||
|
|
scale.range([10, 500]);
|
|||
|
|
scale(50)
|
|||
|
|
scale(480)
|
|||
|
|
scale(325)
|
|||
|
|
scale(750)
|
|||
|
|
d3.scaleLinear()
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Порядок відображення цих значень у консолі буде таким: `10`, `500`, `323.37` і `807.67`.
|
|||
|
|
|
|||
|
|
Зверніть увагу, що шкала використовує лінійний зв'язок між доменом і значеннями діапазону, щоб визначити виведення для заданого числа. Мінімальне значення в домені (50) відповідає мінімальному значенню у діапазоні (10).
|
|||
|
|
|
|||
|
|
# --instructions--
|
|||
|
|
|
|||
|
|
Створіть шкалу і задайте значення домену `[250, 500]`, а діапазону - `[10, 150]`.
|
|||
|
|
|
|||
|
|
**Примітка:** Ви можете прив'язати домен `domain()` та методи `range()` до змінної `scale`.
|
|||
|
|
|
|||
|
|
# --hints--
|
|||
|
|
|
|||
|
|
Використовуйте метод `domain()` для вашого коду.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(code.match(/\.domain/g));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Домен `domain()` в діапазоні `scale` повинен мати значення `[250, 500]`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Використовуйте метод `range()` для вашого коду.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(code.match(/\.range/g));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Значення `range()` діапазону `scale` повинно бути встановлено як `[10, 150]`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Текст заголовку `h2` повинен мати розмір `-102`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('h2').text() == '-102');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --seed--
|
|||
|
|
|
|||
|
|
## --seed-contents--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<body>
|
|||
|
|
<script>
|
|||
|
|
// Add your code below this line
|
|||
|
|
const scale = d3.scaleLinear();
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Add your code above this line
|
|||
|
|
const output = scale(50);
|
|||
|
|
d3.select("body")
|
|||
|
|
.append("h2")
|
|||
|
|
.text(output);
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --solutions--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<body>
|
|||
|
|
<script>
|
|||
|
|
const scale = d3.scaleLinear();
|
|||
|
|
scale.domain([250, 500])
|
|||
|
|
scale.range([10, 150])
|
|||
|
|
const output = scale(50);
|
|||
|
|
d3.select("body")
|
|||
|
|
.append("h2")
|
|||
|
|
.text(output);
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
```
|