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