---
id: 587d7fa9367417b2b2512bd0
title: Invert SVG Elements
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
videoUrl: ''
localeTitle: Инвертировать элементы SVG
---
## Description
Возможно, вы заметили, что гистограмма выглядела как перевернутая или перевернутая. Это связано с тем, как SVG использует (x, y) координаты. В SVG начальная точка для координат находится в верхнем левом углу. Координата x
из 0 помещает фигуру на левый край области SVG. Координата y
из 0 устанавливает форму на верхнем краю области SVG. Более высокие значения x
нажимают прямоугольник вправо. Более высокие значения y
выталкивают прямоугольник вниз. Чтобы сделать панели правыми, вам нужно изменить способ вычисления y
координаты. Он должен учитывать как высоту бара, так и общую высоту области SVG. Высота области SVG равна 100. Если у вас есть точка данных из 0 в наборе, вы хотите, чтобы панель начиналась в нижней части области SVG (а не сверху). Для этого координата y
должна иметь значение 100. Если значение точки данных равно 1, вы должны начать с координаты y
из 100, чтобы установить планку внизу. Затем вам нужно учитывать высоту полосы 1, поэтому конечная координата y
будет равна 99. Координата y
которая равна y = heightOfSVG - heightOfBar
, поместит бары вправо-вверх.
## Instructions
Измените функцию обратного вызова для атрибута y
чтобы установить бары вправо-вверх. Помните, что height
бара в 3 раза превышает значение d
. Заметка
В общем случае соотношение y = h - m * d
, где m
- постоянная, которая масштабирует точки данных.
## Tests
```yml
tests:
- text: Первый rect
должен иметь значение y
64.
testString: 'assert($("rect").eq(0).attr("y") == h - (dataset[0] * 3), "The first rect
should have a y
value of 64.");'
- text: Второй rect
должен иметь значение y
7.
testString: 'assert($("rect").eq(1).attr("y") == h - (dataset[1] * 3), "The second rect
should have a y
value of 7.");'
- text: Третий rect
должен иметь значение y
34.
testString: 'assert($("rect").eq(2).attr("y") == h - (dataset[2] * 3), "The third rect
should have a y
value of 34.");'
- text: Четвертый rect
должен иметь значение y
49.
testString: 'assert($("rect").eq(3).attr("y") == h - (dataset[3] * 3), "The fourth rect
should have a y
value of 49.");'
- text: Пятый rect
должен иметь значение y
25.
testString: 'assert($("rect").eq(4).attr("y") == h - (dataset[4] * 3), "The fifth rect
should have a y
value of 25.");'
- text: Шестой rect
должен иметь значение y
46.
testString: 'assert($("rect").eq(5).attr("y") == h - (dataset[5] * 3), "The sixth rect
should have a y
value of 46.");'
- text: Седьмой rect
должен иметь значение y
13.
testString: 'assert($("rect").eq(6).attr("y") == h - (dataset[6] * 3), "The seventh rect
should have a y
value of 13.");'
- text: ''
testString: 'assert($("rect").eq(7).attr("y") == h - (dataset[7] * 3), "The eighth rect
should have a y
value of 58.");'
- text: ''
testString: 'assert($("rect").eq(8).attr("y") == h - (dataset[8] * 3), "The ninth rect
should have a y
value of 73.");'
```
## Challenge Seed
## Solution
```js
// solution required
```