将滚动条添加到svg容器 [英] Add scrollbar to svg container

问题描述

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

I'm using GetOrgChart to make an organization chart for my company, but I ran into a little problem.

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

If the SVG is bigger than the container we wish to add a scrollbar so you can use it to scroll since this will be a lot faster than dragging it all with your mouse.

我已经尝试过示例，但无法使其正常工作

I've tried this example but was unable to make it work.

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

Is there any way to achieve what I'm looking for?

下面的示例比实际图表要小得多，但是它足以表示问题.

The example below is way smaller than our actual chart, but it should be good enough to represent the problem.

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: "[e-mail]",
      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: "[e-mail]",
      image: "images/f-10.jpg"
    },
    {
      id: 3,
      parentId: 1,
      name: "Evie Johnson",
      title: "Employer relations representative",
      phone: "314-722-6164",
      mail: "[e-mail]",
      image: "images/f-9.jpg"
    },
    {
      id: 4,
      parentId: 1,
      name: "Paul Shetler",
      title: "Teaching assistant",
      phone: "330-263-6439",
      mail: "[e-mail]",
      image: "images/f-5.jpg"
    },
    {
      id: 11,
      parentId: 1,
      name: "Paul Shetler",
      title: "Teaching assistant",
      phone: "330-263-6439",
      mail: "[e-mail]",
      image: "images/f-5.jpg"
    },
    {
      id: 12,
      parentId: 1,
      name: "Paul Shetler",
      title: "Teaching assistant",
      phone: "330-263-6439",
      mail: "[e-mail]",
      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: "[e-mail]",
      image: "images/f-8.jpg"
    },
    {
      id: 7,
      parentId: 2,
      name: "Spencer May",
      title: "System operator",
      phone: "Conservation scientist",
      mail: "[e-mail]",
      image: "images/f-7.jpg"
    },
    {
      id: 8,
      parentId: 6,
      name: "Max Ford",
      title: "Budget manager",
      phone: "989-474-8325",
      mail: "[e-mail]",
      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>

推荐答案

您可以查看

You can take a look at this jsfiddle. The .get-oc-c container shows the scroll bar if needed:

.get-oc-c {
  overflow: auto !important;
}

并且SVG图表元素被包装在一个div中，该div的大小经过调整以适应整个图表:

and the SVG chart element is wrapped in a div that is resized to accomodate the full chart:

function wrapChart() {
  ...
  $("svg").wrap("<div id='svgContainer'></div>");
  ...
}

#svgContainer {
  overflow: visible;
}

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

The wrapChart method is called in the updatedEvent. The chart move option is disabled to remove the arrows on the sides and to prevent panning:

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

原始显示似乎可以正常工作，但是要获取wrapper元素的正确大小值很困难(jsfiddle中使用的表达式非常有经验)，并且当调整窗口大小，扩展链接时，它变得更加复杂/折叠以及图表放大时.一些调整大小使用动画，因此在获得最终值之前，计算必须考虑到延迟.

The original display seems to work but getting the correct size values for the wrapper element is difficult (the expression used in the jsfiddle is very empirical), and it gets even more complicated when the window is resized, when the links are expanded/collapsed and when the chart is zoomed. Some resizing uses animations, so the calculations would have to account for the delay before getting the final values.

jsfiddle显示了一些简单的代码，可以在扩展/折叠节点后恢复滚动位置，但是需要进行改进.我还没有编写代码来说明窗口的大小调整和缩放.

The jsfiddle shows some simple code to restore the scroll position after expanding/collapsing nodes but it would need to be improved. I haven't written code to account for window resizing and for zooming.

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

Given the amount of work needed to make the scroll bars behave correctly, it is probably better to use the panning and moving features supplied by the component. You could also contact the creators of the component and ask them to add the scroll bar option.

这篇关于将滚动条添加到svg容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！