94 lines
3.8 KiB
Markdown
94 lines
3.8 KiB
Markdown
---
|
||
id: 587d7fa8367417b2b2512bcb
|
||
title: Вивчайте про SVG за допомогою D3
|
||
challengeType: 6
|
||
forumTopicId: 301489
|
||
dashedName: learn-about-svg-in-d3
|
||
---
|
||
|
||
# --description--
|
||
|
||
<dfn>SVG</dfn> розшифровується: <dfn>Scalable Vector Graphics</dfn>.
|
||
|
||
Тут "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`.
|
||
|
||
```js
|
||
assert($('svg').length == 1);
|
||
```
|
||
|
||
Елемент `svg` повинен мати встановлений атрибут `width` `500`, або стилізований, щоб мати ширину `500px`.
|
||
|
||
```js
|
||
assert($('svg').attr('width') == '500' || $('svg').css('width') == '500px');
|
||
```
|
||
|
||
Елемент `svg` повинен мати встановлений атрибут `height` `100` або стилізований, щоб мати висоту `100px`.
|
||
|
||
```js
|
||
assert($('svg').attr('height') == '100' || $('svg').css('height') == '100px');
|
||
```
|
||
|
||
# --seed--
|
||
|
||
## --seed-contents--
|
||
|
||
```html
|
||
<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--
|
||
|
||
```html
|
||
<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>
|
||
```
|