---
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>
```
