我正在使用GetOrgChart为我的公司制作组织结构图,但我遇到了一个小问题。
如果SVG
大于我们希望添加滚动条的容器,那么您可以使用它滚动,因为这比用鼠标拖动它要快得多。
我已尝试过此example但无法使其正常工作。
有没有办法达到我想要的目的?
下面的示例比我们的实际图表小,但它应该足以表示问题。
var peopleElement = document.getElementById("people");
var orgChart = new getOrgChart(peopleElement, {
primaryFields: ["name", "title", "phone", "mail"],
photoFields: ["image"],
scale: 0.4,
dataSource: [{
id: 1,
parentId: null,
name: "Amber McKenzie",
title: "CEO",
phone: "678-772-470",
mail: "lemmons@jourrapide.com",
adress: "Atlanta, GA 30303",
image: "images/f-11.jpg"
},
{
id: 2,
parentId: 1,
name: "Ava Field",
title: "Paper goods machine setter",
phone: "937-912-4971",
mail: "anderson@jourrapide.com",
image: "images/f-10.jpg"
},
{
id: 3,
parentId: 1,
name: "Evie Johnson",
title: "Employer relations representative",
phone: "314-722-6164",
mail: "thornton@armyspy.com",
image: "images/f-9.jpg"
},
{
id: 4,
parentId: 1,
name: "Paul Shetler",
title: "Teaching assistant",
phone: "330-263-6439",
mail: "shetler@rhyta.com",
image: "images/f-5.jpg"
},
{
id: 11,
parentId: 1,
name: "Paul Shetler",
title: "Teaching assistant",
phone: "330-263-6439",
mail: "shetler@rhyta.com",
image: "images/f-5.jpg"
},
{
id: 12,
parentId: 1,
name: "Paul Shetler",
title: "Teaching assistant",
phone: "330-263-6439",
mail: "shetler@rhyta.com",
image: "images/f-5.jpg"
},
{
id: 5,
parentId: 2,
name: "Rebecca Francis",
title: "Welding machine setter",
phone: "408-460-0589",
image: "images/f-4.jpg"
},
{
id: 6,
parentId: 2,
name: "Rebecca Randall",
title: "Optometrist",
phone: "801-920-9842",
mail: "JasonWGoodman@armyspy.com",
image: "images/f-8.jpg"
},
{
id: 7,
parentId: 2,
name: "Spencer May",
title: "System operator",
phone: "Conservation scientist",
mail: "hodges@teleworm.us",
image: "images/f-7.jpg"
},
{
id: 8,
parentId: 6,
name: "Max Ford",
title: "Budget manager",
phone: "989-474-8325",
mail: "hunter@teleworm.us",
image: "images/f-6.jpg"
},
{
id: 9,
parentId: 7,
name: "Riley Bray",
title: "Structural metal fabricator",
phone: "479-359-2159",
image: "images/f-3.jpg"
},
{
id: 10,
parentId: 7,
name: "Callum Whitehouse",
title: "Radar controller",
phone: "847-474-8775",
image: "images/f-2.jpg"
}
]
});
$('.get-left,.get-down,.get-up,.get-right').remove();
$(document).ready(function() {
$(".get-oc-c").css("overflow","scroll");
})
#people {
width: 90%;
height: 90%;
border:1px solid #000;
}
<link href="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.js"></script>
<div id="people"></div>
答案 0 :(得分:6)
您可以查看 this jsfiddle 。如果需要,.get-oc-c
容器会显示滚动条:
.get-oc-c {
overflow: auto !important;
}
并且SVG图表元素被包装在一个div中,该div被调整大小以容纳整个图表:
function wrapChart() {
...
$("svg").wrap("<div id='svgContainer'></div>");
...
}
#svgContainer {
overflow: visible;
}
在wrapChart
中调用updatedEvent
方法。禁用图表移动选项以删除侧面的箭头并防止平移:
var orgChart = new getOrgChart(peopleElement, {
enableMove: false,
...
});
原始显示似乎有效但是为包装元素获取正确的大小值很困难(jsfiddle中使用的表达式非常经验),当窗口调整大小,链接扩展时,它变得更加复杂/折叠和图表缩放时。一些调整大小使用动画,因此计算必须在获得最终值之前考虑延迟。
jsfiddle显示了一些简单的代码,用于在展开/折叠节点后恢复滚动位置,但需要进行改进。我还没有编写代码来解释窗口大小调整和缩放问题。
考虑到使滚动条表现正常所需的工作量,最好使用组件提供的平移和移动功能。您也可以联系组件的创建者并要求他们添加滚动条选项。
答案 1 :(得分:2)
这里缺少的重要css规则是:
max-height
和overflow-y
overflow-y
应设置为auto和max-height到SVG永远不应越过的高度(这是我们将触发滚动条的高度)
“静态”方法将使用媒体查询来设置不同屏幕的预期大小,这同样会在这些大小上适当地触发滚动条。当然,如果客户的规模与您没有想到的相比,它可能无法正常工作。
我个人会建议使用滚动插件来处理响应/自动调整大小以在需要时显示滚动条。 CSS传统上是为了支持静态HTML内容而构建的,但是现在,我们有很多动态内容(严格来说不是来自服务器端),捕获和修复所有问题总是令人头痛。例如滚动条的外观可能会导致DOM的宽度发生变化,但无法通过CSS观察它。同样在某些浏览器中,传统的滚动条不必要地胖。
一些示例插件包括: