chengnan
/
s202226701001


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
							<!doctype html>
<html>
<head>
    <title>Network | DataSet</title>

    <style type="text/css">
        html, body {
            font: 11pt arial;
        }

        h1 {
            font-size: 150%;
            margin: 5px 0;
        }

        h2 {
            font-size: 100%;
            margin: 5px 0;
        }

        table.view {
            width: 100%;
        }

        table td {
            vertical-align: top;
        }

        table table {
            background-color: #f5f5f5;
            border: 1px solid #e5e5e5;
        }

        table table td {
            vertical-align: middle;
        }

        input[type=text], pre {
            border: 1px solid lightgray;
        }

        pre {
            margin: 0;
            padding: 5px;
            font-size: 10pt;
        }

        #network {
            width: 100%;
            height: 400px;
            border: 1px solid lightgray;
        }
    </style>

    <script type="text/javascript" src="../../../dist/vis.js"></script>
    <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript">
        var nodes, edges, network;

        // convenience method to stringify a JSON object
        function toJSON(obj) {
            return JSON.stringify(obj, null, 4);
        }

        function addNode() {
            try {
                nodes.add({
                    id: document.getElementById('node-id').value,
                    label: document.getElementById('node-label').value
                });
            }
            catch (err) {
                alert(err);
            }
        }

        function updateNode() {
            try {
                nodes.update({
                    id: document.getElementById('node-id').value,
                    label: document.getElementById('node-label').value
                });
            }
            catch (err) {
                alert(err);
            }
        }
        function removeNode() {
            try {
                nodes.remove({id: document.getElementById('node-id').value});
            }
            catch (err) {
                alert(err);
            }
        }

        function addEdge() {
            try {
                edges.add({
                    id: document.getElementById('edge-id').value,
                    from: document.getElementById('edge-from').value,
                    to: document.getElementById('edge-to').value
                });
            }
            catch (err) {
                alert(err);
            }
        }
        function updateEdge() {
            try {
                edges.update({
                    id: document.getElementById('edge-id').value,
                    from: document.getElementById('edge-from').value,
                    to: document.getElementById('edge-to').value
                });
            }
            catch (err) {
                alert(err);
            }
        }
        function removeEdge() {
            try {
                edges.remove({id: document.getElementById('edge-id').value});
            }
            catch (err) {
                alert(err);
            }
        }

        function draw() {
            // create an array with nodes
            nodes = new vis.DataSet();
            nodes.on('*', function () {
                document.getElementById('nodes').innerHTML = JSON.stringify(nodes.get(), null, 4);
            });
            nodes.add([
                {id: '1', label: 'Node 1'},
                {id: '2', label: 'Node 2'},
                {id: '3', label: 'Node 3'},
                {id: '4', label: 'Node 4'},
                {id: '5', label: 'Node 5'}
            ]);

            // create an array with edges
            edges = new vis.DataSet();
            edges.on('*', function () {
                document.getElementById('edges').innerHTML = JSON.stringify(edges.get(), null, 4);
            });
            edges.add([
                {id: '1', from: '1', to: '2'},
                {id: '2', from: '1', to: '3'},
                {id: '3', from: '2', to: '4'},
                {id: '4', from: '2', to: '5'}
            ]);

            // create a network
            var container = document.getElementById('network');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {};
            network = new vis.Network(container, data, options);

        }

    </script>
    
</head>

<body onload="draw();">

<p>
    This example demonstrates dynamically adding, updating and removing nodes
    and edges using a DataSet.
</p>

<h1>Adjust</h1>
<table>
    <tr>
        <td>
            <h2>Node</h2>
            <table>
                <tr>
                    <td></td>
                    <td><label for="node-id">Id</label></td>
                    <td><input id="node-id" type="text" value="6"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><label for="node-label">Label</label></td>
                    <td><input id="node-label" type="text" value="Node 6"></td>
                </tr>
                <tr>
                    <td></td>
                    <td>Action</td>
                    <td>
                        <button id="node-add" onclick="addNode();">Add</button>
                        <button id="node-update" onclick="updateNode();">Update</button>
                        <button id="node-remove" onclick="removeNode();">Remove</button>
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <h2>Edge</h2>
            <table>
                <tr>
                    <td></td>
                    <td><label for="edge-id">Id</label></td>
                    <td><input id="edge-id" type="text" value="5"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><label for="edge-from">From</label></td>
                    <td><input id="edge-from" type="text" value="3"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><label for="edge-to">To</label></td>
                    <td><input id="edge-to" type="text" value="4"></td>
                </tr>
                <tr>
                    <td></td>
                    <td>Action</td>
                    <td>
                        <button id="edge-add" onclick="addEdge();">Add</button>
                        <button id="edge-update" onclick="updateEdge();">Update</button>
                        <button id="edge-remove" onclick="removeEdge();">Remove</button>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

</table>

<h1>View</h1>
<table class="view">
    <colgroup>
        <col width="25%">
        <col width="25%">
        <col width="50%">
    </colgroup>
    <tr>
        <td>
            <h2>Nodes</h2>
            <pre id="nodes"></pre>
        </td>

        <td>
            <h2>Edges</h2>
            <pre id="edges"></pre>
        </td>

        <td>
            <h2>Network</h2>

            <div id="network"></div>
        </td>
    </tr>
</table>

</body>
</html>