3.4 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d7fac367417b2b2512bdb | Налаштування домену й діапазону на шкалі | 6 | 301491 | set-a-domain-and-a-range-on-a-scale |
--description--
За замовчуванням, масштаби використовують зв'язки ідентичності. Це означає, що вхідне значення відповідає вихідному значенню. Проте масштаби можуть бути набагато гнучкішими та цікавими.
Скажімо, набір даних має значення від 50 до 480. Це вхідна інформація для масштабування, також відома як domain.
Відобразіть ці точки вздовж осі x на полотні SVG у діапазоні від 10 одиниць до 500. Цю вихідну інформацію також називають range.
Методи domain() та range() встановлюють ці значення для шкали. Обидва методи сприймають масив щонайменше двох елементів як аргумент. Наприклад:
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() для вашого коду.
assert(code.match(/\.domain/g));
Домен domain() в діапазоні scale повинен мати значення [250, 500].
assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]));
Використовуйте метод range() для вашого коду.
assert(code.match(/\.range/g));
Значення range() діапазону scale повинно бути встановлено як [10, 150].
assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]));
Текст заголовку h2 повинен мати розмір -102.
assert($('h2').text() == '-102');
--seed--
--seed-contents--
<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--
<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>