3.8 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d7fa8367417b2b2512bcc | Відображення форм за допомогою SVG | 6 | 301485 | display-shapes-with-svg |
--description--
На останньому завданні ми створили елемент svg із заданою шириною та висотою, який був помітний, оскільки до нього застосовано background-color в тезі style. Для заданої ширини та висоти код створює місце.
Наступним кроком є створення форм для розміщення в області svg. У SVG існує ряд підтримуваних форм, таких як прямокутники та кола. Їх використовують для відображення даних. Наприклад, форма SVG прямокутника (<rect>) може створити елемент у стовпчиковій діаграмі.
Коли ви розміщуєте форму в області svg, ви можете вказати, куди вона рухається, з координатами x та y. Початок координат (0, 0) знаходиться у верхньому лівому куті. Додатні значення для x переміщують форму праворуч, а додатні значення для y переміщують форму вниз від початку координат.
Щоб розмістити форму посередині 500 (ширина) x 100 (висота) svg з останнього завдання, координата x буде 250, а y координата буде 50.
SVG rect має чотири атрибути. Існують координати x та y, де вони розміщені в області svg. Він також має height та width для визначення розміру.
--instructions--
Додайте форму rect до svg використовуючи append(), і надайте атрибуту width 25 і height 100. Також надайте rect атрибутам x і y, для кожного встановлено значення 0.
--hints--
Ваш документ має мати 1 елемент rect.
assert($('rect').length == 1);
Елемент rect має мати встановлений атрибут width 25.
assert($('rect').attr('width') == '25');
Елемент rect має мати встановлений атрибут height 100.
assert($('rect').attr('height') == '100');
Елемент rect має мати встановлений атрибут x 0.
assert($('rect').attr('x') == '0');
Елемент rect має мати встановлений атрибут y 0.
assert($('rect').attr('y') == '0');
--seed--
--seed-contents--
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
// Add your code below this line
// Add your code above this line
</script>
</body>
--solutions--
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
.append("rect")
.attr("width", 25)
.attr("height", 100)
.attr("x", 0)
.attr("y", 0);
</script>
</body>