GetOrgChart Рендеринг с масштабом: авто не центрируется

Question

Я работаю над тем, чтобы getOrgChart работал в iframe с фиксированной шириной, чтобы я мог отображать диаграмму org.Функциональность, как она работает, однако есть одна вещь, которая, кажется, не работает должным образом, и это масштаб: автоматическое центрирование компонента:

Это тема, которую я использую:

size: [300, 370],
            toolbarHeight: 46,
            textPoints: [
                { x: 150, y: 50, width: 285 },
                { x: 150, y: 90, width: 285 },
                { x: 150, y: 120, width: 285 }

            ],
            textPointsNoImage: [
                { x: 150, y: 50, width: 285 },
                { x: 150, y: 90, width: 285 },
                { x: 150, y: 120, width: 285 }

            ],
            expandCollapseBtnRadius: 20,
            defs: '<filter id="f1" x="0" y="0" width="200%" height="200%"><feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" /><feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" /><feBlend in="SourceGraphic" in2="blurOut" mode="normal" /></filter>',
            box: '<rect x="0" y="0" height="370" width="300" rx="10" ry="10" class="myCustomTheme-box" filter="url(#f1)"  />',
            text: '<text text-anchor="middle" width="[width]" class="get-text get-text-[index]" x="[x]" y="[y]">[text]</text>',
            image: '<clipPath id="getMonicaClip"><circle cx="150" cy="235" r="85" /></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#getMonicaClip)" xlink:href="[href]" x="65" y="130" height="190" width="170"/>',
            reporters: '<circle cx="80" cy="170" r="20" class="reporters"></circle><text class="reporters-text" text-anchor="middle" width="120" x="80" y="177">[reporters]</text>'

Только немного изменился по сравнению с демо-версией 2. Затем я изменил текст репортеров:

 .reporters-text {
   font-size: large;
   fill: #ffffff;
  }

Однако, даже если пользовательская тема изменилась на прежнюю, с моим набором данных я всегда получаютот же результат:

Все это происходит внутри фрейма в Salesforce Dev Org.Однако я видел, что это происходит только с моими динамически сгенерированными данными, в то время как фиксированные наборы данных, представленные в демонстрациях, по-прежнему отображают то, что должны.

Это рендеринг внутри страницы Visualforce, которая, в свою очередь, открывается компонентом Lightning,однако даже если открыть автономную страницу VF, вы получите тот же результат.

Мне интересно, как это происходит, потому что, когда я сам не генерирую данные, а беру некоторые предварительно сгенерированные данные, центры рендеринга без проблем:

Упорядочение списка узлов также не помогло, поскольку я пытался сделать это с помощью жесткого кодирования массива, но svg по-прежнему не отображался полностью по центру.

Answer 1

(буквально потратил последние несколько часов на взлом этой ошибки, только чтобы выяснить это вскоре после публикации здесь)

Кажется, проблема в том, что единственный человек с репортерами на его имя находится в середине второго уровня иерархии. Я поменялся местами между ним и самым левым человеком на уровне 2, и вуаля, он каким-то образом осознал, что он должен снова правильно центрироваться.

Для меня это означает, что мне сначала нужно будет создать узлы с наибольшим количеством менеджеров, и заказывать их либо из стороны в сторону, либо просто вдали от центра.

{ id: 1, parentId: null, name: "Test", title: "fancy", image:'available'},
                    { id: 2, parentId: 1, name: "Test", title: "fancy", image:'available'},
                    { id: 3, parentId: 1, name: "Test", title: "fancy", image:'available'},
                    { id: 4, parentId: 1, name: "Test", title: "fancy", image:'available'},
                    { id: 5, parentId: 3, name: "Test", title: "fancy", image:'available'},
                    { id: 6, parentId: 3, name: "Test", title: "fancy", image:'available'},
                    { id: 7, parentId: 3, name: "Test", title: "fancy", image:'available'},
                    { id: 8, parentId: 3, name: "Test", title: "fancy", image:'available'},
                    { id: 9, parentId: 3, name: "Test", title: "fancy", image:'available'},
                    { id: 10, parentId: 3, name: "Test", title: "fancy", image:'available'},
                    { id: 11, parentId: 3, name: "Test", title: "fancy", image:'available'},
                    { id: 12, parentId: 6, name: "Test", title: "fancy", image:'available'},
                    { id: 13, parentId: 6, name: "Test", title: "fancy", image:'available'},
                    { id: 14, parentId: 6, name: "Test", title: "fancy", image:'available'},
                    { id: 15, parentId: 6, name: "Test", title: "fancy", image:'available'},
                    { id: 16, parentId: 6, name: "Test", title: "fancy", image:'available'},
                    { id: 17, parentId: 10, name: "^Test", title: "fancy", image:'available'}

Этот массив приводит к этому при загрузке

Пока этот массив:

{ id: 1, parentId: null, name: "Test", title: "fancy", image:'available'},
                        { id: 2, parentId: 1, name: "Test", title: "fancy", image:'available'},
                        { id: 3, parentId: 1, name: "Test", title: "fancy", image:'available'},
                        { id: 4, parentId: 1, name: "Test", title: "fancy", image:'available'},
                        { id: 5, parentId: 2, name: "Test", title: "fancy", image:'available'},
                        { id: 6, parentId: 2, name: "Test", title: "fancy", image:'available'},
                        { id: 7, parentId: 2, name: "Test", title: "fancy", image:'available'},
                        { id: 8, parentId: 2, name: "Test", title: "fancy", image:'available'},
                        { id: 9, parentId: 2, name: "Test", title: "fancy", image:'available'},
                        { id: 10, parentId: 2, name: "Test", title: "fancy", image:'available'},
                        { id: 11, parentId: 2, name: "Test", title: "fancy", image:'available'},
                        { id: 12, parentId: 6, name: "Test", title: "fancy", image:'available'},
                        { id: 13, parentId: 6, name: "Test", title: "fancy", image:'available'},
                        { id: 14, parentId: 6, name: "Test", title: "fancy", image:'available'},
                        { id: 15, parentId: 6, name: "Test", title: "fancy", image:'available'},
                        { id: 16, parentId: 6, name: "Test", title: "fancy", image:'available'},
                        { id: 17, parentId: 10, name: "^Test", title: "fancy", image:'available'}

(обратите внимание, что я изменил parentIds, чтобы теперь он был связан с 2 вместо 3)

Привести к этому:

То же самое произошло, когда я изменил его на 4 вместо 3.