Инвертировать элементы SVG
Возможно, вы заметили, что гистограмма выглядела как перевернутая или перевернутая. Это связано с тем, как 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 , поместит бары вправо-вверх.
Измените функцию обратного вызова для атрибута y чтобы установить бары вправо-вверх. Помните, что height бара в 3 раза превышает значение d . Заметка
В общем случае соотношение y = h - m * d , где m - постоянная, которая масштабирует точки данных.