0

我正在努力让 getOrgChart 在具有固定宽度的 iframe 中工作，以便我可以显示组织结构图。原样的功能确实有效，但是有一件事似乎无法正常工作，那就是 scale:auto 实际上使组件居中：

这是我使用的主题：

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

仅与Demo 2略有不同。然后我更改了reporters-text：

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

然而，即使自定义主题改回原来的样子，使用我的数据集，我总是得到相同的结果：

从 iframe 的加载进行渲染

这一切都发生在 Salesforce Dev Org 的 iframe 中。但是，我看到这仅发生在我动态生成的数据中，而演示中提供的固定数据集仍然显示它们应该显示的内容。

它在 Visualforce 页面中呈现，而该页面又由 Lightning 组件打开，但即使单独打开 VF 页面也会得到相同的结果。

我很好奇这是怎么发生的，因为当我自己不生成数据而是获取一些预生成的数据时，渲染中心没有问题：

虚拟数据中心就好了

排序节点列表也无济于事，因为我已经尝试过对数组进行硬编码，但 svg 仍然没有完全居中呈现。

4

1 回答 1

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 时，发生了同样的事情。

于 2019-03-16T23:28:05.810 回答