3.8 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d7fa8367417b2b2512bcb | Вивчайте про SVG за допомогою D3 | 6 | 301489 | learn-about-svg-in-d3 |
--description--
SVG розшифровується: Scalable Vector Graphics.
Тут "scalable" означає, що якщо ви збільшите або зменшите об'єкт, то він не буде виглядати піксельним. Він масштабується за допомогою системи відображення, будь то на маленькому мобільному екрані або на великому телевізійному моніторі.
SVG використовують для того, щоб створити загальні геометричні форми. Оскільки D3 відображає дані у візуальному представленні, то він використовує SVG для того, щоб створити форми для візуалізації. Форми SVG для веб-сторінки повинні міститися в тезі HTML svg.
CSS може бути масштабованим в тому випадку, коли стилі використовують відносні одиниці (такі як vh, vw або відсотки), але використання SVG є більш гнучким для створення візуалізації даних.
--instructions--
Додайте вузол svg до body, використовуючи append(). Дайте йому атрибут width, встановлений для даної константи w, і атрибут height, встановлений для даної константи h, використовуючи для кожного методи attr() or style(). Ви побачите його у результатах, оскільки до нього в тезі style застосовано background-color рожевого кольору.
Note: При використанні attr() атрибути ширини та висоти не мають одиниць. Це будівельний блок масштабування - елемент завжди матиме співвідношення ширини до висоти 5: 1, незалежно від рівня масштабування.
--hints--
Ваш документ повинен містити елемент 1 svg.
assert($('svg').length == 1);
Елемент svg повинен мати встановлений атрибут width 500, або стилізований, щоб мати ширину 500px.
assert($('svg').attr('width') == '500' || $('svg').css('width') == '500px');
Елемент svg повинен мати встановлений атрибут height 100 або стилізований, щоб мати висоту 100px.
assert($('svg').attr('height') == '100' || $('svg').css('height') == '100px');
--seed--
--seed-contents--
<style>
svg {
background-color: pink;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
// Add your code below this line
// Add your code above this line
</script>
</body>
--solutions--
<style>
svg {
background-color: pink;
}
</style>
<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)
</script>
</body>