gpt4 book ai didi

jquery - 将滚动条添加到 svg 容器

转载 作者:行者123 更新时间:2023-12-03 22:15:15 28 4
gpt4 key购买 nike

我正在使用 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>

最佳答案

您可以看看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;
}

updatedEvent 中调用wrapChart 方法。禁用图表移动选项以删除两侧的箭头并防止平移:

var orgChart = new getOrgChart(peopleElement, {
enableMove: false,
...
});

原始显示似乎可以工作,但是获取包装元素的正确大小值很困难(jsfiddle 中使用的表达式非常依赖经验),并且当调整窗口大小、展开链接时,情况会变得更加复杂/collapsed 以及图表缩放时。某些调整大小使用动画,因此计算必须考虑获得最终值之前的延迟。

jsfiddle 显示了一些简单的代码,用于在展开/折叠节点后恢复滚动位置,但需要改进。我还没有编写代码来考虑窗口大小调整和缩放。

考虑到使滚动条正确运行所需的工作量,最好使用组件提供的平移和移动功能。您还可以联系该组件的创建者并要求他们添加滚动条选项。

关于jquery - 将滚动条添加到 svg 容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44066161/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com