GetOrgChart Rendering with scale:auto is not centered

Question

I am working on getting getOrgChart to work in an iframe with fixed width so that I can display an org chart. The functionality as is does work, however there is one thing that does not seem to work properly and that is scale:auto actually centering the component:

This it the theme that I use:

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>'

Only slightly changed from the Demo 2. Then I have changed reporters-text:

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

However, even with the custom theme changed back to what it was, with my data set I always get the same result:

This is all happening inside an iframe in a Salesforce Dev Org. However, I have seen this only happen with my dynamically generated data, while the fixed datasets provided in the Demos still display what they should.

It's rendering inside a Visualforce Page which in turn is opened by a Lightning Component, however even opening the VF Page standalone gets you the same result.

I'm curious how this happens because when I don't generate the data myself but take some pregenerated data, the rendering centers without a problem:

Ordering the List of Nodes has not helped either as I have done trying this with hardcoding the array, but the svg still did not render completely centered.

Answer 1

(Have literally spent the last few hours hacking away at this error, only to find out shortly after posting here)

It seems like the issue is that the only Person with Reporters to his name is in the middle of the second level of hierarchy. I switched places between him and the leftmost person in level 2, and voila, it somehow recognized it should center correctly again.

For me this means that I will have to create the nodes with the most managers first, and order them either from side to side or simply away from the center.

{ 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'}

This array leads to this on loadout

While this array:

{ 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'}

(Notice I changed the parentIds to now be related to 2 instead of 3)

Lead to this:

The same thing happened when I changed it to 4 instead of 3.