Как применить полностью закрытое горизонтальное переполнение при переводе дочернего элемента?

Question

У меня есть SVG-диаграмма, расположенная в контейнере. Настройка CSS выглядит следующим образом:

Как видно на картинке, у меня проблема в том, что моя диаграмма частично скрыта. Поэтому я применяю overflow-x: auto. Но поскольку я перевожу свою диаграмму, чтобы центр диаграммы находился в центре области просмотра, я не могу прокрутить ее до левой стороны диаграммы (полоса прокрутки начинается с левой точки отсечения).

Как я могу сделать диаграмму полностью прокручиваемой, но в то же время держать диаграмму в центре окна просмотра?

EDIT

Вот примерная скрипка

Answer 1

Я мог бы найти способ, используя javascript и не используя аргументы css translate и margin на графике. Код js автоматически прокручивает полосу прокрутки к ее центру (применяется в обработчике событий изменения размера, он также реагирует). Код выглядит следующим образом:

if ((window.innerWidth * 0.95) < $("#chart").width()) {
            $("#container").scrollLeft(($("#chart").width() - ("#container").width()) /2);
        }