Back

Scroll into view

A method that can be called, to pan/zoom the viewport to the specified nodes

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

        <div id="demo"></div>
    

CSS

CSS
//No CSS for this example 

JavaScript

JavaScript

        var options = {
            container: document.getElementById("demo"),
            area: {
                height: null
            },
            data: {
                url: "/dvsl/data/net-chart/friend-net.json"
            },
            navigation: {
                focusNodeExpansionRadius: 3,
                initialNodes: ["m-1"],
                mode: "showall"
            },
            style: {
                node: { imageCropping: true },
                nodeStyleFunction: nodeStyle,
                selection: { fillColor: "#0099cc" }
            },
            interaction: {
                selection: {
                    lockNodesOnMove: false
                },
                zooming: {
                    autoZoomExtent: [0.5, 4]
                }
            }
        };

        function nodeStyle(node) {
            node.radius = 20;
            node.label = "";
            node.background = "blue";
            node.image = "/dvsl/data/net-chart/friend-net/" + node.id + ".png";
        }

        var rnd = new ZoomCharts.Internal.Base.Random(38923);

        function pickRandomNodes(nodes) {
            if (nodes.length === 0) {
                throw new Error("At least 1 node should be supplied");
            }
            var howMany = 1 + Math.floor(3 * rnd.get()); // pick 1 to 4 random nodes
            howMany = Math.min(nodes.length, howMany);
            var ret = [];
            nodes = nodes.slice(); // clone

            while (howMany--) {
                var idx = Math.floor(nodes.length * rnd.get());
                ret.push(nodes[idx]);
                nodes.splice(idx, 1);
            }
            return ret;
        }

        var chart = new NetChart(options);

        var timeoutHandle = setTimeout(function () {
            var nodes = chart.nodes();
            var scrollToNodes = function () {
                var zoomableNodes = pickRandomNodes(nodes);
                chart.selection(zoomableNodes);
                chart.scrollIntoView(zoomableNodes);
                timeoutHandle = setTimeout(scrollToNodes, 4000);
            };
            scrollToNodes();
        }, 1000);

        function disposeDemo() {
            window.clearTimeout(timeoutHandle);
            disposeDemo = null;
            timeoutHandle = null;
        }

    

Data

Data
{
    "nodes": [
        {
            "id": "m-1",
            "age": 20,
            "name": "Joe",
            "loaded": true
        },
        {
            "id": "m-2",
            "age": 15,
            "name": "Fred",
            "loaded": true
        },
        {
            "id": "m-3",
            "age": 16,
            "name": "Tom",
            "loaded": true
        },
        {
            "id": "m-4",
            "age": 35,
            "name": "Robert",
            "loaded": true
        },
        {
            "id": "m-5",
            "age": 38,
            "name": "Mark",
            "loaded": true
        },
        {
            "id": "m-6",
            "age": 42,
            "name": "Jason",
            "loaded": true
        },
        {
            "id": "m-7",
            "age": 37,
            "name": "Bill",
            "loaded": true
        },
        {
            "id": "m-8",
            "age": 60,
            "name": "Andre",
            "loaded": true
        },
        {
            "id": "m-9",
            "age": 63,
            "name": "Daniel",
            "loaded": true
        },
        {
            "id": "m-10",
            "age": 17,
            "name": "Thomas",
            "loaded": true
        },
        {
            "id": "m-11",
            "age": 21,
            "name": "Sergejs",
            "loaded": true
        },
        {
            "id": "m-12",
            "age": 26,
            "name": "Bryon",
            "loaded": true
        },
        {
            "id": "m-13",
            "age": 29,
            "name": "Toby",
            "loaded": true
        },
        {
            "id": "f-1",
            "age": 28,
            "name": "Anna",
            "loaded": true
        },
        {
            "id": "f-2",
            "age": 21,
            "name": "Wendy",
            "loaded": true
        },
        {
            "id": "f-3",
            "age": 17,
            "name": "Dina",
            "loaded": true
        },
        {
            "id": "f-4",
            "age": 26,
            "name": "Cate",
            "loaded": true
        },
        {
            "id": "f-5",
            "age": 31,
            "name": "Elisa",
            "loaded": true
        },
        {
            "id": "f-6",
            "age": 34,
            "name": "Suzie",
            "loaded": true
        },
        {
            "id": "f-7",
            "age": 26,
            "name": "Trixie",
            "loaded": true
        },
        {
            "id": "f-8",
            "age": 37,
            "name": "Emily",
            "loaded": true
        },
        {
            "id": "f-9",
            "age": 39,
            "name": "Alice",
            "loaded": true
        },
        {
            "id": "f-10",
            "age": 42,
            "name": "Violet",
            "loaded": true
        },
        {
            "id": "f-11",
            "age": 32,
            "name": "Sara",
            "loaded": true
        },
        {
            "id": "f-12",
            "age": 28,
            "name": "Julia",
            "loaded": true
        },
        {
            "id": "f-13",
            "age": 19,
            "name": "Ramona",
            "loaded": true
        },
        {
            "id": "f-14",
            "age": 20,
            "name": "Flavia",
            "loaded": true
        },
        {
            "id": "f-15",
            "age": 23,
            "name": "Liga",
            "loaded": true
        },
        {
            "id": "f-16",
            "age": 27,
            "name": "Jessica",
            "loaded": true
        },
        {
            "id": "f-17",
            "age": 40,
            "name": "Barbara",
            "loaded": true
        },
        {
            "id": "f-18",
            "age": 45,
            "name": "Hanna",
            "loaded": true
        },
        {
            "id": "f-19",
            "age": 53,
            "name": "Giselle",
            "loaded": true
        },
        {
            "id": "f-20",
            "age": 27,
            "name": "Mia",
            "loaded": true
        },
        {
            "id": "f-21",
            "age": 19,
            "name": "Rose",
            "loaded": true
        },
        {
            "id": "f-23",
            "age": 28,
            "name": "Judy",
            "loaded": true
        },
        {
            "id": "f-22",
            "age": 32,
            "name": "Nikola",
            "loaded": true
        },
        {
            "id": "f-24",
            "age": 34,
            "name": "Sofia",
            "loaded": true
        },
        {
            "id": "f-25",
            "age": 37,
            "name": "Fatima",
            "loaded": true
        },
        {
            "id": "f-26",
            "age": 44,
            "name": "Samantha",
            "loaded": true
        },
        {
            "id": "f-27",
            "age": 23,
            "name": "Chelia",
            "loaded": true
        },
        {
            "id": "f-28",
            "age": 18,
            "name": "Alexa",
            "loaded": true
        },
        {
            "id": "f-29",
            "age": 21,
            "name": "Karla",
            "loaded": true
        },
        {
            "id": "f-30",
            "age": 23,
            "name": "Karina",
            "loaded": true
        },
        {
            "id": "f-31",
            "age": 51,
            "name": "Patricia",
            "loaded": true
        },
        {
            "id": "f-32",
            "age": 47,
            "name": "Anna",
            "loaded": true
        },
        {
            "id": "f-33",
            "age": 38,
            "name": "Laura",
            "loaded": true
        }
    ],
    "links": [
        {
            "id": "l01",
            "from": "m-1",
            "to": "f-1",
            "type": "friend"
        },
        {
            "id": "l02",
            "from": "m-1",
            "to": "f-2",
            "type": "friend"
        },
        {
            "id": "l03",
            "from": "m-1",
            "to": "f-3",
            "type": "friend"
        },
        {
            "id": "l04",
            "from": "m-1",
            "to": "f-4",
            "type": "friend"
        },
        {
            "id": "l06",
            "from": "m-1",
            "to": "f-6",
            "type": "friend"
        },
        {
            "id": "l07",
            "from": "m-2",
            "to": "f-2",
            "type": "collegue"
        },
        {
            "id": "l12",
            "from": "m-3",
            "to": "f-10",
            "type": "spouse"
        },
        {
            "id": "l13",
            "from": "m-3",
            "to": "f-5",
            "type": "enemy"
        },
        {
            "id": "l14",
            "from": "m-3",
            "to": "f-8",
            "type": "friend"
        },
        {
            "id": "l15",
            "from": "m-3",
            "to": "f-4",
            "type": "friend"
        },
        {
            "id": "l16",
            "from": "m-3",
            "to": "f-9",
            "type": "friend"
        },
        {
            "id": "l17",
            "from": "m-4",
            "to": "f-15",
            "type": "spouse"
        },
        {
            "id": "l18",
            "from": "m-4",
            "to": "f-14",
            "type": "collegue"
        },
        {
            "id": "l22",
            "from": "m-5",
            "to": "f-15",
            "type": "collegue"
        },
        {
            "id": "l23",
            "from": "m-5",
            "to": "f-4",
            "type": "collegue"
        },
        {
            "id": "l27",
            "from": "f-11",
            "to": "f-15",
            "type": "collegue"
        },
        {
            "id": "l28",
            "from": "m-5",
            "to": "m-6",
            "type": "friend"
        },
        {
            "id": "l29",
            "from": "m-6",
            "to": "m-7",
            "type": "friend"
        },
        {
            "id": "l30",
            "from": "m-7",
            "to": "m-8",
            "type": "friend"
        },
        {
            "id": "l31",
            "from": "m-8",
            "to": "m-9",
            "type": "friend"
        },
        {
            "id": "l32",
            "from": "m-9",
            "to": "m-10",
            "type": "friend"
        },
        {
            "id": "l33",
            "from": "m-10",
            "to": "m-11",
            "type": "friend"
        },
        {
            "id": "l34",
            "from": "m-11",
            "to": "m-12",
            "type": "friend"
        },
        {
            "id": "l35",
            "from": "m-12",
            "to": "m-13",
            "type": "friend"
        },
        {
            "id": "l36",
            "from": "m-13",
            "to": "m-5",
            "type": "friend"
        },
        {
            "id": "l101",
            "from": "m-7",
            "to": "f-25",
            "type": "collegue"
        },
        {
            "id": "l102",
            "from": "m-7",
            "to": "f-26",
            "type": "collegue"
        },
        {
            "id": "l103",
            "from": "m-9",
            "to": "f-26",
            "type": "collegue"
        },
        {
            "id": "l104",
            "from": "m-9",
            "to": "f-25",
            "type": "collegue"
        },
        {
            "id": "l105",
            "from": "f-25",
            "to": "f-26",
            "type": "collegue"
        },
        {
            "id": "l106",
            "from": "m-7",
            "to": "m-9",
            "type": "collegue"
        },
        {
            "id": "l107",
            "from": "f-26",
            "to": "f-28",
            "type": "friend"
        },
        {
            "id": "l108",
            "from": "f-27",
            "to": "f-28",
            "type": "friend"
        },
        {
            "id": "l109",
            "from": "f-27",
            "to": "f-29",
            "type": "friend"
        },
        {
            "id": "l110",
            "from": "f-10",
            "to": "f-29",
            "type": "friend"
        },
        {
            "id": "l111",
            "from": "f-29",
            "to": "f-33",
            "type": "friend"
        },
        {
            "id": "l112",
            "from": "f-29",
            "to": "f-32",
            "type": "friend"
        },
        {
            "id": "l113",
            "from": "f-29",
            "to": "f-31",
            "type": "friend"
        },
        {
            "id": "l114",
            "from": "f-24",
            "to": "f-31",
            "type": "friend"
        },
        {
            "id": "l115",
            "from": "f-24",
            "to": "f-32",
            "type": "friend"
        },
        {
            "id": "l116",
            "from": "f-24",
            "to": "f-33",
            "type": "friend"
        },
        {
            "id": "l117",
            "from": "f-24",
            "to": "f-23",
            "type": "friend"
        },
        {
            "id": "l118",
            "from": "f-23",
            "to": "f-22",
            "type": "friend"
        },
        {
            "id": "l119",
            "from": "f-22",
            "to": "f-21",
            "type": "friend"
        },
        {
            "id": "l120",
            "from": "f-21",
            "to": "f-20",
            "type": "friend"
        },
        {
            "id": "l121",
            "from": "f-20",
            "to": "f-19",
            "type": "friend"
        },
        {
            "id": "l122",
            "from": "f-19",
            "to": "f-18",
            "type": "friend"
        },
        {
            "id": "l123",
            "from": "f-18",
            "to": "f-17",
            "type": "friend"
        },
        {
            "id": "l124",
            "from": "f-17",
            "to": "f-16",
            "type": "friend"
        },
        {
            "id": "l125",
            "from": "f-16",
            "to": "f-30",
            "type": "friend"
        },
        {
            "id": "l126",
            "from": "f-19",
            "to": "f-30",
            "type": "friend"
        },
        {
            "id": "l130",
            "from": "f-15",
            "to": "m-10",
            "type": "friend"
        },
        {
            "id": "l131",
            "from": "f-23",
            "to": "m-4",
            "type": "friend"
        },
        {
            "id": "l132",
            "from": "f-15",
            "to": "m-7",
            "type": "friend"
        },
        {
            "id": "l133",
            "from": "f-12",
            "to": "m-13",
            "type": "friend"
        },
        {
            "id": "l134",
            "from": "f-21",
            "to": "m-12",
            "type": "friend"
        },
        {
            "id": "l135",
            "from": "f-29",
            "to": "m-11",
            "type": "friend"
        },
        {
            "id": "l136",
            "from": "f-13",
            "to": "m-11",
            "type": "friend"
        },
        {
            "id": "l137",
            "from": "f-13",
            "to": "m-7",
            "type": "friend"
        },
        {
            "id": "l138",
            "from": "f-13",
            "to": "m-12",
            "type": "friend"
        },
        {
            "id": "l139",
            "from": "f-13",
            "to": "m-6",
            "type": "friend"
        },
        {
            "id": "l140",
            "from": "f-17",
            "to": "f-9",
            "type": "friend"
        },
        {
            "id": "l141",
            "from": "f-2",
            "to": "m-4",
            "type": "collegue"
        },
        {
            "id": "l142",
            "from": "f-5",
            "to": "m-13",
            "type": "friend"
        },
        {
            "id": "l143",
            "from": "f-7",
            "to": "f-20",
            "type": "friend"
        }
    ]
}
Download Data