--- id: 587d7fa9367417b2b2512bd0 title: Invert SVG Elements 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
```html ```
## Solution
```js // solution required ```