144 lines
5.1 KiB
Markdown
144 lines
5.1 KiB
Markdown
|
---
|
|||
|
|
id: 587d7fa9367417b2b2512bd0
|
|||
|
|
title: Інвертування SVG елементів
|
|||
|
|
challengeType: 6
|
|||
|
|
forumTopicId: 301488
|
|||
|
|
dashedName: invert-svg-elements
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# --description--
|
|||
|
|
|
|||
|
|
Можливо, Ви помітили, що стовпчикова діаграма виглядає ніби перевернута або інвертована. Це пов'язано зі способом використання (x, y) координат у SVG.
|
|||
|
|
|
|||
|
|
Початком координат у SVG виступає точка, розташована у верхньому лівому куті. Вісь 0 `x` розміщує фігуру у лівій частині площини SVG. Вісь 0 `y` розміщує фігуру у верхній частині площини SVG. Чим вище значення осі `x`, тим більше прямокутник зсувається вправо. Чим вище значення осі `y`, тим більше прямокутник опускається вниз.
|
|||
|
|
|
|||
|
|
Щоб розмістити стовпчик праворуч зверху, необхідно змінити обчислення `y` координати. Треба враховувати як висоту стовпчика, так і загальну висоту SVG площини.
|
|||
|
|
|
|||
|
|
Висота площини SVG дорівнює 100. Припустимо, що у Вас задана точка 0, а Ви хотіли б, щоб стовпчик починався у нижній частині площини SVG (не зверху). Для цього, значення `y` координати має бути 100. Якби значення точки було 1, тоді, щоб задати стовпчик знизу, ми б брали за початкове значення `y` координати 100. Враховуємо висоту стовпчика 1, в такому випадку значення осі `y` становитиме 99.
|
|||
|
|
|
|||
|
|
Застосовуючи цю формулу `y = heightOfSVG - heightOfBar` для обчислення значення `y` координати, розміщуємо стовпчики у правій верхній частині площини.
|
|||
|
|
|
|||
|
|
# --instructions--
|
|||
|
|
|
|||
|
|
Змініть функцію зворотного відліку для атрибуту `y`, щоб встановити стовпчики праворуч зверху. Пам'ятайте, що `height` стовпчика у 3 рази перевищує значення `d`.
|
|||
|
|
|
|||
|
|
**Примітка:** Співвідношення має такий вигляд: `y = h - m * d`, де `m` константа, яка масштабує значення точок.
|
|||
|
|
|
|||
|
|
# --hints--
|
|||
|
|
|
|||
|
|
Перший `rect` повинен мати значення `y` `64`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('rect').eq(0).attr('y') == h - dataset[0] * 3);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Другий `rect` повинен мати значення `y` `7`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('rect').eq(1).attr('y') == h - dataset[1] * 3);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Третій `rect` повинен мати значення `y` `34`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('rect').eq(2).attr('y') == h - dataset[2] * 3);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Четвертий `rect` повинен мати значення `y` `49`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('rect').eq(3).attr('y') == h - dataset[3] * 3);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
П'ятий `rect` повинен мати значення `y` `25`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('rect').eq(4).attr('y') == h - dataset[4] * 3);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Шостий `rect` повинен мати значення `y` `46`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('rect').eq(5).attr('y') == h - dataset[5] * 3);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Сьомий `rect` повинен мати значення `y` `13`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('rect').eq(6).attr('y') == h - dataset[6] * 3);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Восьмий `rect` повинен мати значення `y` `58`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('rect').eq(7).attr('y') == h - dataset[7] * 3);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Дев'ятий `rect` повинен мати значення `y` `73`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('rect').eq(8).attr('y') == h - dataset[8] * 3);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --seed--
|
|||
|
|
|
|||
|
|
## --seed-contents--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<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);
|
|||
|
|
|
|||
|
|
svg.selectAll("rect")
|
|||
|
|
.data(dataset)
|
|||
|
|
.enter()
|
|||
|
|
.append("rect")
|
|||
|
|
.attr("x", (d, i) => i * 30)
|
|||
|
|
.attr("y", (d, i) => {
|
|||
|
|
// Add your code below this line
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Add your code above this line
|
|||
|
|
})
|
|||
|
|
.attr("width", 25)
|
|||
|
|
.attr("height", (d, i) => 3 * d);
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --solutions--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<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);
|
|||
|
|
|
|||
|
|
svg.selectAll("rect")
|
|||
|
|
.data(dataset)
|
|||
|
|
.enter()
|
|||
|
|
.append("rect")
|
|||
|
|
.attr("x", (d, i) => i * 30)
|
|||
|
|
.attr("y", (d, i) => h - 3 * d)
|
|||
|
|
.attr("width", 25)
|
|||
|
|
.attr("height", (d, i) => 3 * d);
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
```
|