--- id: 587d7fa9367417b2b2512bd0 title: Invert SVG Elements challengeType: 6 forumTopicId: 301488 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: The first rect should have a y value of 64. testString: assert($('rect').eq(0).attr('y') == h - (dataset[0] * 3)); - text: The second rect should have a y value of 7. testString: assert($('rect').eq(1).attr('y') == h - (dataset[1] * 3)); - text: The third rect should have a y value of 34. testString: assert($('rect').eq(2).attr('y') == h - (dataset[2] * 3)); - text: The fourth rect should have a y value of 49. testString: assert($('rect').eq(3).attr('y') == h - (dataset[3] * 3)); - text: The fifth rect should have a y value of 25. testString: assert($('rect').eq(4).attr('y') == h - (dataset[4] * 3)); - text: The sixth rect should have a y value of 46. testString: assert($('rect').eq(5).attr('y') == h - (dataset[5] * 3)); - text: The seventh rect should have a y value of 13. testString: assert($('rect').eq(6).attr('y') == h - (dataset[6] * 3)); - text: The eighth rect should have a y value of 58. testString: assert($('rect').eq(7).attr('y') == h - (dataset[7] * 3)); - text: The ninth rect should have a y value of 73. testString: assert($('rect').eq(8).attr('y') == h - (dataset[8] * 3)); ```
## Challenge Seed
```html ```
## Solution
```html // solution required ```