12

我正在使用 GetOrgChart 为我的公司制作组织结构图，但遇到了一个小问题。

如果SVG它比容器大，我们希望添加一个滚动条，以便您可以使用它来滚动，因为这比用鼠标拖动它要快得多。

我已经尝试过这个例子，但无法让它工作。

有什么方法可以实现我想要的吗？

下面的示例比我们的实际图表要小得多，但它应该足以代表问题。

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>

4

2 回答 2

7

你可以看看这个 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 显示了一些简单的代码，用于在展开/折叠节点后恢复滚动位置，但需要改进。我还没有编写代码来解释窗口大小和缩放。

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

于 2017-05-22T15:48:03.683 回答
2

这里缺少的重要 CSS 规则是：

max-height和overflow-y

overflow-y应该设置为 auto 并且 max-height 设置为 SVG 不应该跨越的高度（这是我们将触发滚动条的高度）

“静态”方法是使用媒体查询来设置不同屏幕的预期尺寸，这同样会在这些尺寸上适当地触发滚动条。当然，如果客户的尺寸您没有想到，它可能无法正常工作。

我个人建议使用滚动插件来处理响应/自动调整大小以在需要时显示滚动条。传统上，CSS 是为支持静态 HTML 内容而构建的，但如今，我们有很多动态内容（并非严格来自服务器端），捕捉和修复所有问题总是令人头疼。例如，滚动条的外观可能会导致 DOM 的宽度发生变化，但无法通过 CSS 观察它。同样在某些浏览器中，传统的滚动条是不必要的胖。

一些示例插件包括：

于 2017-05-28T17:45:54.417 回答