Add scrollbar to svg container

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

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: "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>

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;
}

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;
}

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,
  ...
});

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.

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.

The important css rules missing here are:

max-height and overflow-y

overflow-y should be set to auto and max-height to a height the SVG should never cross (which is the height we will trigger scrollbar)

A 'static' approach will be to use media queries to set the expected sizes for different screens which will likewise trigger scrollbar appropriately on those sizes. Of course it may not work well if client is on a size you didn't think of.

I will personally recommend using a scroll plugin to handle responsiveness/auto-resizing to display scroll bars when needed though. CSS was traditionally built to support static HTML content but these days, we have a lot of dynamic content (not strictly from server side) and it's always a headache to catch and fix all issues. e.g. the appearance of a scrollbar can cause the width of your DOM to change but there's no way to watch for it via CSS. Also in some browsers traditional scroll bar is unnecessarily fat.

Some example plugins include:

来源：https://stackoverflow.com/questions/44066161/add-scrollbar-to-svg-container

标签

jquery

getorgchart