vis 边两侧增加标签，以便于网络拓扑图显示两个设备相连端口

<!doctype html>
<html>
    <head>
        <title>Network | Basic usage</title>

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

        <style type="text/css">
            #mynetwork {
                width: 600px;
                height: 400px;
                border: 1px solid lightgray;
            }
        </style>
    </head>
    <body>

        <p>
            Playing with edge labels.
        </p>

        <div id="mynetwork"></div>

        <script type="text/javascript">
            // create an array with nodes
            var nodes = new vis.DataSet([
                {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'},
                {id: 6, label: 'Node 6'}
            ]);

            // create an array with edges
            var edges = new vis.DataSet([
                {from: 1, to: 3, label: '1G', labelFrom: '800M', labelTo: '20M', arrows: ' from,to'},
                {from: 1, to: 2, label: '1G', labelFrom: 'G1/1', labelTo: 'G1/1', arrows: ' from,to'},
                {from: 2, to: 4, label: 'edge', labelFrom: 'from', labelTo: 'to'},
                {from: 2, to: 5, label: 'edge', labelFrom: 'from', labelTo: 'to'},
                {from: 2, to: 6, label: 'edge', labelFrom: 'from', labelTo: 'to'},
            ]);

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

            var options = {
                layout: {
                    hierarchical: {
                        direction: "UD"
                    }
                }
            };
            var network = new vis.Network(container, data, options);
        </script>


    </body
</html>

GitHub - pdugas/vis: vis.js is a dynamic, browser-based visualization libraryvis.js is a dynamic, browser-based visualization library - GitHub - pdugas/vis: vis.js is a dynamic, browser-based visualization libraryhttps://github.com/pdugas/vis vis/labels.html at develop · pdugas/vis · GitHubvis.js is a dynamic, browser-based visualization library - vis/labels.html at develop · pdugas/vishttps://github.com/pdugas/vis/blob/develop/examples/network/edgeStyles/labels.html

Edge Labels at both sides of the edgle · Issue #2104 · almende/vis · GitHubhttps://github.com/almende/vis/issues/2104

vis 边两侧增加标签，以便于网络拓扑图显示两个设备相连端口

Guess you like