我正在努力让 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>'
仅与演示 2 略有不同。然后我更改了 reports-text:
.reporters-text {
font-size: large;
fill: #ffffff;
}
但是,即使自定义主题改回原来的样子,使用我的数据集我总是得到相同的结果:
这一切都发生在 Salesforce Dev Org 的 iframe 内。但是,我发现这种情况仅发生在动态生成的数据上,而演示中提供的固定数据集仍然显示应有的内容。
它在 Visualforce 页面内渲染,而 Visualforce 页面又由 Lightning 组件打开,但即使独立打开 VF 页面也会得到相同的结果。
我很好奇这是如何发生的,因为当我自己不生成数据而是获取一些预先生成的数据时,渲染中心没有问题:
对节点列表进行排序也没有帮助,因为我已经通过对数组进行硬编码来尝试此操作,但 svg 仍然没有呈现完全居中。
最佳答案
(实际上花了过去几个小时解决这个错误,只是在发布到这里后不久才发现)
问题似乎在于,唯一有记者名字的人位于第二级层次结构的中间。我在第 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'}
(请注意,我将 ParentId 更改为现在与 2 而不是 3 相关)
当我将其更改为 4 而不是 3 时,发生了同样的事情。
关于javascript - GetOrgChart 渲染比例为 :auto is not centered,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55202453/