vis.js 使用JSON创建网络拓扑图

最新推荐文章于 2024-08-12 08:59:29 发布

allway2

最新推荐文章于 2024-08-12 08:59:29 发布

阅读量1k

点赞数 1

文章标签： javascript json 前端

本文链接：https://blog.csdn.net/allway2/article/details/121188935

版权

<!doctype html>
<HTML>
    <HEAD>
        <meta charset="utf-8" />
        <TITLE>[vis.js] Network | Basic Usage | TEST: Load External JSON Datafile</TITLE>
        <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <style type="text/css">
            #mynetwork {
                /* width: 600px; */
                width: 800px;
                height: 600px;
                border: 2px solid lightgray;
            }
        </style>
    </HEAD>

    <BODY>

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

        <!-- Add an invisible <div> element to the document, to hold the JSON data: -->
        <div id="networkJSON-results" class="results" style="display:none"></div>

        <script type="text/javascript">

            // -------------------------------------------------------------------------
            // OPTIONS:

            // http://visjs.org/docs/network/#modules
            // http://visjs.org/docs/network/edges.html#
            // http://visjs.org/docs/network/physics.html#

            var options = {
                edges: {
                    arrows: {
                        to: {enabled: true, scaleFactor: 0.75, type: 'arrow'},
                        // to: {enabled: false, scaleFactor:0.5, type:'bar'},
                        middle: {enabled: false, scalefactor: 1, type: 'arrow'},
                        from: {enabled: true, scaleFactor: 0.3, type: 'arrow'}
                        // from: {enabled: false, scaleFactor:0.5, type:'arrow'}
                    },
                    arrowStrikethrough: true,
                    chosen: true,
                    color: {
                        // color:'#848484',
                        color: 'red',
                        highlight: '#848484',
                        hover: '#848484',
                        inherit: 'from',
                        opacity: 1.0
                    },
                    dashes: false,
                    font: {
                        color: '#343434',
                        size: 14, // px
                        face: 'arial',
                        background: 'none',
                        strokeWidth: 2, // px
                        strokeColor: '#ffffff',
                        align: 'horizontal',
                        multi: false,
                        vadjust: 0,
                        bold: {
                            color: '#343434',
                            size: 14, // px
                            face: 'arial',
                            vadjust: 0,
                            mod: 'bold'
                        },
                        ital: {
                            color: '#343434',
                            size: 14, // px
                            face: 'arial',
                            vadjust: 0,
                            mod: 'italic'
                        },
                        boldital: {
                            color: '#343434',
                            size: 14, // px
                            face: 'arial',
                            vadjust: 0,
                            mod: 'bold italic'
                        },
                        mono: {
                            color: '#343434',
                            size: 15, // px
                            face: 'courier new',
                            vadjust: 2,
                            mod: ''
                        }
                    }
                },
                // http://visjs.org/docs/network/physics.html#
                physics: {
                    enabled: true,
                    barnesHut: {
                        gravitationalConstant: -2000,
                        centralGravity: 0.3,
                        // springLength: 95,
                        springLength: 175,
                        springConstant: 0.04,
                        damping: 0.09,
                        avoidOverlap: 0
                    },
                    forceAtlas2Based: {
                        gravitationalConstant: -50,
                        centralGravity: 0.01,
                        springConstant: 0.08,
                        springLength: 100,
                        damping: 0.4,
                        avoidOverlap: 0
                    },
                    repulsion: {
                        centralGravity: 0.2,
                        springLength: 200,
                        springConstant: 0.05,
                        nodeDistance: 100,
                        damping: 0.09
                    },
                    hierarchicalRepulsion: {
                        centralGravity: 0.0,
                        springLength: 100,
                        springConstant: 0.01,
                        nodeDistance: 120,
                        damping: 0.09
                    },
                    maxVelocity: 50,
                    minVelocity: 0.1,
                    solver: 'barnesHut',
                    stabilization: {
                        enabled: true,
                        iterations: 1000,
                        updateInterval: 100,
                        onlyDynamicEdges: false,
                        fit: true
                    },
                    timestep: 0.5,
                    adaptiveTimestep: true
                },
            };

            // -------------------------------------------------------------------------
            // IMPORT DATA FROM EXTERNAL JSON FILE:

            // Per: https://github.com/ikwattro/blog/blob/master/sources/easy-graph-visualization-with-vis-dot-js.adoc:

            // NOTES:
            // 1. Must use double quotes ("; not ') in that JSON file;
            // 2. Cannot have comments in that file, only data!  See:
            //    https://stackoverflow.com/questions/244777/can-comments-be-used-in-json
            // 3. Per the path below, place the "test.json" file in a "data" subdirectory.

            var json = $.getJSON("data/test.json")
                    .done(function (data) {
                        var data = {
                            nodes: data.nodes,
                            edges: data.edges
                        };
                        var network = new vis.Network(container, data, options);
                    });

            var container = document.getElementById('mynetwork');

        </script>

    </BODY>
</HTML>

{
    "nodes": [
        {
            "id": "1",
            "label": "Node 1"
        }
        , {
            "id": "2",
            "label": "Node 2\nline 2"
        }
        , {
            "id": "3",
            "label": "Node 3"
        }
        , {
            "id": "4",
            "label": "Node 4"
        }
        , {
            "id": "5",
            "label": "Node 5"
        }
    ],
    "edges": [
        {
            "from": "1",
            "to": "2",
            "label": "apples"
        }
        , {
            "from": "1",
            "to": "3",
            "label": "bananas"
        }
        , {
            "from": "2",
            "to": "4",
            "label": "cherries"
        }
        , {
            "from": "2",
            "to": "5",
            "label": "dates"
        }
        , {
            "from": "2",
            "to": "3",
            "label": "EAGLES!",
            "color": {
                "color": "green",
                "highlight": "blue"
            },
            "arrows": {
                "to": {
                    "scaleFactor": "1.25",
                    "type": "circle"
                }
            }
        }
    ]
}