使用d3.js创建网络拓扑图

超、凢脫俗 2023-10-02 13:54 10阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Network Topology Implemented with D3js.</title>
        <link rel="stylesheet" href="ftstcall/styles.css">
        <link rel="stylesheet" href="style.css">
        <script type="text/javascript" src="d3v491/d3.js"></script>
        <script type="text/javascript" src="d3-tip.js"></script>
    
        <style>
            rect#view_container {
                stroke: black;
                stroke-width: 2px;
                fill: none;
            }
        </style>
    </head>
    
    <body>
        <div>
            <button id="load_btn">Load</button>
            <button id="animated_btn">Static</button>
            <select autocomplete="off" id="desc_field_selector">
                <option value="mac" selected>MAC</option>
                <option value='ip'>IP</option>
                <option value='device_name'>Name</option>
            </select>
        </div>
        <svg width="960" height="600" id="topo_container">
            <rect id="view_container" x="0" y="0" width="960" height="600"></rect>
        </svg>
    
        <script>
            var topo = null,  // keep track of topo.
                animated = false;   // animated or static
    
            function initialize_topo() {
                /*
                    create container for links and nodes elements.
                */
                var svg = d3.select('svg#topo_container');
    
                var links = svg.select('g.links');
                if (!links.size()) {
                    links = svg.append('g').attr('class', 'links');
                }
    
                var nodes = svg.select('g.nodes');
                if (!nodes.size()) {
                    nodes = svg.append('g').attr('class', 'nodes');
                }
    
                var descs = svg.select('g.desc');
                if (!descs.size()) {
                    descs = svg.append('g').attr('class', 'desc');
                }
    
                // /*
                //     debug
                // */
                // var inter_nodes = svg.select('g.intermediate_nodes');
                // if (!inter_nodes.size()) {
                //     inter_nodes = svg.append('g').attr('class', 'intermediate_nodes');
                // }
    
                if (!topo) {
                    /*
                        force simulation
                    */
                    var simulation = d3.forceSimulation().stop();
    
                    /*
                        force
                    */
                    var link_frc = d3.forceLink()
                            .id(function(d) {
                                return d.id;
                            })
                            .distance(function(d) {
                                if ('id' in d.source && 'id' in d.target) {
                                    return 120;
                                }
                                else {
                                    return 60;
                                }
                            }),
    
                        charge_frc = d3.forceManyBody()
                            .strength(function(d) {
                                if ('id' in d) {
                                    return -160;
                                }
                                else {
                                    return -200;
                                }
                            }).distanceMax(300),
    
                        center_frc = d3.forceCenter();
    
                    /*
                        gestures.
                    */
    
                    // drag node
                    var drag = d3.drag()
                        .on('start', function(d) {
                            if (!d3.event.active) {
                                simulation.alphaTarget(0.3).restart();
                            }
    
                            d.fx = d.x;
                            d.fy = d.y;
    
                        })
                        .on('drag', function(d) {
                            d.fx = d3.event.x;
                            d.fy = d3.event.y;
                        })
                        .on('end', function(d) {
                            var simulation = topo['simulation'];
    
                            if (!d3.event.active) {
                                simulation.alphaTarget(0);
                            }
    
                            d.fx = null;
                            d.fy = null;
                        });
    
    
                    // zoom and drag to move
                    var zoom = d3.zoom().scaleExtent([0.1, 5]).on('zoom', function() {
                        links.attr('transform', d3.event.transform);
                        nodes.attr('transform', d3.event.transform);
                        descs.attr('transform', d3.event.transform);
    
                        // /*
                        //     debug: zoom or pan intermediate nodes;
                        // */
                        // inter_nodes.attr('transform', d3.event.transform);
                    });
                    svg.call(zoom);
    
    
                    /*
                        tooltip
                    */
                    var node_tip = d3.tip()
                        .attr('class', 'tooltip')
                        .offset([-10, 0])
                        .html(function(d) {
                            return "<p><strong class='title'>MAC:</strong> " + d.mac + "</p>" +
                                   "<p><strong class='title'>IP:</strong>" + d.ip + "</p>" +
                                   "<p><strong class='title'>Netmask:</strong>" + d.netmask + "</p>" +
                                   "<p><strong class='title'>Gateway:</strong>" + d.gateway + "</p>" +
                                   "<p><strong class='title'>VLAN:</strong>" + d.vlan + "</p>" +
                                   "<p><strong class='title'>Name:</strong>" + d.device_name + "</p>";
                        });
                    svg.call(node_tip);
    
                    var link_src_tip = d3.tip().attr('class', 'tooltip'),
                        link_dst_tip = d3.tip().attr('class', 'tooltip');
                    svg.call(link_src_tip);
                    svg.call(link_dst_tip);
    
    
                    if (animated) {
                        simulation.force('link', link_frc)
                            .force('center', center_frc)
                            .force('charge', charge_frc);
                    }
    
                    // keep track of topo components.
                    topo = {
                        'simulation': simulation,
                        'link_force': link_frc,
                        'charge_force': charge_frc,
                        'center_force': center_frc,
                        'drag': drag,
                        'zoom': zoom,
                        'node_tip': node_tip,
                        'link_source_tip': link_src_tip,
                        'link_dest_tip': link_dst_tip
                    };
    
    
                }
            }
    
    
    
            function load() {
                /*
                    load: load new nodes, links to simulation.
                */
    
                var simulation = topo['simulation'],
                    link_frc = topo['link_force'],
                    drag = topo['drag'],
                    node_tip = topo['node_tip'],
                    link_src_tip = topo['link_source_tip'],
                    link_dst_tip = topo['link_dest_tip'],
                    svg = d3.select('svg#topo_container');
    
                d3.json("data.json", function(error, graph){
                    if (error) {
                        throw error;
                    }
    
                    graph = graph['topo'];
                    // var links = [];
    
                    // A mapping: {node.id: node}
                    var node_by_id = d3.map(graph.nodes, function(d) {
                        return d.id;
                    });
                    var bilinks = [];
    
                    graph.links.forEach(function(link, idx) {
                        var src = link.source = node_by_id.get(link.source),
                            target = link.target = node_by_id.get(link.target),
                            inter = {};
    
                        graph.nodes.push(inter);
                        graph.links.push({'source': src, 'target': inter}, {'source': inter, 'target': target});
                        // links.push({'source': src, 'target': inter}, {'source': inter, 'target': target});
                        bilinks.push({
                            'id': link['id'],
                            'source': src, 
                            'intermediate': inter, 
                            'target': target,
                            'source_port_disp': link['source_port_disp'],
                            'target_port_disp': link['target_port_disp']
                        });
                    });
    
    
                    /*
                        update link visualization
                    */
                    var link = svg.select('g.links').selectAll('g.link_container').data(bilinks);
                    link.exit().remove();
                    var new_link = link.enter()
                                        .append('g')
                                        .classed('link_container', true);
    
                    new_link.append('path')
                            .classed('link_item', true);
    
                    new_link.append('path')
                            .classed('link_selector', true)
                            .on('mouseover', function(d) {
                                var src_node, dst_node;
                                /*
                                    focus on target link
                                */
                                d3.select(this.parentNode).classed('focus', true);
    
                                /*
                                    focus on target and source node
                                    and show tips.
                                */
                                svg.select('g.nodes').selectAll('g.node_container')
                                    .each(function(node_d) {
                                        if (node_d.id == d.source.id) {
                                            src_node = d3.select(this).classed('focus focusing', true);
    
                                        }
                                        else if (node_d.id == d.target.id) {
                                            dst_node = d3.select(this).classed('focus focusing', true);
                                        }
                                    });
    
                                /*
                                    calculate tooltip position
                                */
                                var src_dir, dst_dir,
                                    src_offset = [0, 0],
                                    dst_offset = [0, 0],
                                    min_distance = 20,
                                    x_distance = src_node.datum().x - dst_node.datum().x,
                                    y_distance = src_node.datum().y - dst_node.datum().y;
    
                                if (Math.abs(x_distance) > Math.abs(y_distance)) {
                                    if (x_distance > 0) {
                                        src_dir = 'e';
                                        src_offset[1] = 5;
                                        dst_dir = 'w';
                                        dst_offset[1] = -5;
                                    }
                                    else {
                                        src_dir = 'w';
                                        src_offset[1] = -5;
                                        dst_dir = 'e';
                                        dst_offset[1] = 5;
                                    }
    
                                    if (Math.abs(y_distance) > min_distance) {
                                        if (y_distance > 0) {
                                            src_dir = 's' + src_dir;
                                            src_offset = [-5, -(Math.sign(src_offset[1]) * 5)];
                                            dst_dir = 'n' + dst_dir;
                                            dst_offset = [5, -(Math.sign(dst_offset[1]) * 5)];
                                        }
                                        else {
                                            src_dir = 'n' + src_dir;
                                            src_offset = [5, -(Math.sign(src_offset[1]) * 5)];
                                            dst_dir = 's' + dst_dir;
                                            dst_offset = [-5, -(Math.sign(dst_offset[1]) * 5)];
                                        }
                                    }
                                }
                                else {
                                    if (y_distance > 0) {
                                        src_dir = 's';
                                        src_offset[0] = 5;
                                        dst_dir = 'n';
                                        dst_offset[0] = -5;
                                    }
                                    else {
                                        src_dir = 'n';
                                        src_offset[0] = -5;
                                        dst_dir = 's';
                                        dst_offset[0] = 5;
                                    }
    
                                    if (Math.abs(x_distance) > min_distance) {
                                        if (x_distance > 0) {
                                            src_dir = src_dir + 'e';
                                            src_offset = [-(Math.sign(src_offset[0]) * 5), -5];
                                            dst_dir = dst_dir + 'w';
                                            dst_offset = [-(Math.sign(dst_offset[0]) * 5), 5];
                                        }
                                        else {
                                            src_dir = src_dir + 'w';
                                            src_offset = [-(Math.sign(src_offset[0]) * 5), 5];
                                            dst_dir = dst_dir + 'e';
                                            dst_offset = [-(Math.sign(dst_offset[0]) * 5), -5];
                                        }
                                    }
                                }
    
                                link_src_tip
                                    .direction(src_dir)
                                    .offset(src_offset)
                                    .html("<strong>" + d.source_port_disp + "</strong>")
                                    .show(src_node.node());
    
                                link_dst_tip
                                    .direction(dst_dir)
                                    .offset(dst_offset)
                                    .html("<strong> " + d.target_port_disp + "</strong>")
                                    .show(dst_node.node());
    
                            })
                            .on('mouseout', function(d) {
                                /*
                                    move focus away from link.
                                */
                                d3.select(this.parentNode).classed('focus', false);
    
                                /*
                                    move focus away from target and source nodes
                                    hide tips
                                */
                                svg.select('g.nodes').selectAll('g.node_container')
                                    .each(function(node_d) {
                                        if (node_d.id == d.source.id) {
                                            src_node = d3.select(this).classed('focus focusing', false);
                                            link_src_tip.hide();
                                        }
                                        else if (node_d.id == d.target.id) {
                                            dst_node = d3.select(this).classed('focus focusing', false);
                                            link_dst_tip.hide();
                                        }
                                    });
                            });
    
    
                    link = new_link.merge(link);
    
                    /*
                        update node visualization
                    */
    
                    var node = svg.select('g.nodes').selectAll('g.node_container').data(
                        graph.nodes.filter(function(d) {
                            return 'id' in d;
                        })
                    );
                    node.exit().remove();
                    var new_node = node.enter()
                                        .append('g')
                                        .on('click', function() {console.log('click:', this);})
                                        .on('mouseover', function(d) {
                                            d3.select(this).classed('focus', true);
                                            return node_tip.show.apply(this, arguments);
                                        })
                                        .on('mouseout', function(d) {
                                            d3.select(this).classed('focus', false);
                                            return node_tip.hide.apply(this, arguments);
                                        })
                                        .call(drag);
    
                    new_node.append('circle')
                        .attr('r', 20);
    
                    new_node.append('text')
                            .attr('x', 0)
                            .attr('y', 12)
                            .classed('ftstcall', true)
                            .text("\ueaf2");
    
                    node = new_node.merge(node);
                    node.attr('class', function(d) {
                        var stat_cls;
                        if (d['knmp_on'] && d['ip_on'] && d['snmp_on']) {
                            stat_cls = 'stat_normal';
                        }
                        else if (d['knmp_on'] && d['ip_on'] && !d['snmp_on']) {
                            stat_cls = 'stat_abnormal';
                        }
                        else if (d['knmp_on'] && !d['ip_on'] && !d['snmp_on']) {
                            stat_cls = 'stat_error'
                        }
                        else if (!d['knmp_on'] && !d['ip_on'] && !d['snmp_on']) {
                            stat_cls = 'stat_down';
                        }
                        else {
                            // knmp off, snmp_on -> unknown device.
                            stat_cls = 'stat_unknown';
                        }
                        return 'node_container ' + stat_cls;
                    });
    
    
                    /*
                        update descriptions
                    */
                    var desc = svg.select('g.desc').selectAll('g.desc_container').data(
                        graph.nodes.filter(function(d) {
                            return 'id' in d;
                        })
                    );
                    desc.exit().remove();
                    var new_desc = desc.enter()
                                    .append('g')
                                    .classed('desc_container', true);
    
                    new_desc.append('text')
                            .attr('x', 0)
                            .attr('y', 35);
    
                    desc = new_desc.merge(desc);
                    desc.select('text').text(function(d) {
                        return d['mac'];
                    });
    
    
                    // /*******************************************
                    //     BEGIN-debug: show intermediate nodes
                    // */
                    // var inter_node = svg.select('g.intermediate_nodes').selectAll('circle').data(
                    //     graph.nodes.filter(function(d) {
                    //         return !('id' in d);
                    //     })
                    // );
                    // inter_node.exit().remove();
                    // inter_node.enter()
                    //           .append('circle')
                    //           .attr('r', 3)
                    //           .attr('fill', 'white');
                    // /*
                    //     END-debug
                    // *********************************************/
    
    
                    /*
                        apply new nodes, links to logics
                    */
                    simulation.nodes(graph.nodes);
                    link_frc.links(graph.links);
                    // link_frc.links(links);
    
                    /*
                        update link, node selection closure.
                        for performance.
                    */
                    simulation.on('tick', function() {
                        do_tick(link, node, desc);
                    });
    
    
                    do_layout();
    
                });
    
            }
    
    
            function do_layout() {
                var svg = d3.select('svg#topo_container'),
                    center_frc = topo['center_force'];
    
                var width = +(svg.style('width').replace('px', '')),
                    height = +(svg.style('height').replace('px', ''));
    
    
                center_frc.x(width / 2)
                          .y(height / 2);
    
                if (animated) {
                    do_animated_layout();
                }
                else {
                    do_static_layout();
                }
            }
    
    
    
            function do_static_layout() {
                /*
                    deregister drag event.
                    register force
    
                    call simulation.tick() several times
                    call ticked()   -> draw finished layout
    
                    deregister force
                    register drag event again.
                */
    
                var simulation = topo['simulation'],
                    center_frc = topo['center_force'],
                    charge_frc = topo['charge_force'],
                    link_frc = topo['link_force'];
    
                if (!animated) {
                    simulation
                        .force('center', center_frc)
                        .force('charge', charge_frc)
                        .force('link', link_frc);
                }
                simulation.alpha(1);
    
    
                for (var i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
                    simulation.tick();
                }
    
                if (!animated) {
                    simulation
                        .force('center', null)
                        .force('charge', null)
                        .force('link', null);
                }
    
                do_one_tick();
            }
    
            function do_animated_layout() {
                /*
                    deregister drag event.
                    register force
    
                    call simulation.tick() several times
                    call ticked()   -> draw finished layout
    
                    deregister force
                    register drag event again.
                */
    
                var simulation = topo['simulation'],
                    center_frc = topo['center_force'],
                    charge_frc = topo['charge_force'],
                    link_frc = topo['link_force'];
    
    
                if (!animated) {
                    simulation
                        .force('center', center_frc)
                        .force('charge', charge_frc)
                        .force('link', link_frc);
                }
                simulation.alpha(1)
    
    
                var ticks_per_render = 5;
                window.requestAnimationFrame(function render() {
                    for (var i = 0; i < ticks_per_render; i++) {
                        simulation.tick();
                    }
    
                    do_one_tick();
    
                    if (simulation.alpha() > simulation.alphaMin()) {
                        window.requestAnimationFrame(render);
                    }
                    else {
    
                        if (!animated) {
                            simulation
                                .force('center', null)
                                .force('charge', null)
                                .force('link', null);
                        }
                    }
                });
    
            }
    
            function do_tick(link_sel, node_sel, desc_sel) {
    
                /*
                    update visualization of links
                        path
                */
                link_sel.select('path.link_item').attr("d", function(d) {
                    return "M" + d['source'].x + "," + d['source'].y
                        + "S" + d['intermediate'].x + "," + d['intermediate'].y
                        + " " + d['target'].x + "," + d['target'].y;
                });
    
                link_sel.select('path.link_selector').attr("d", function(d) {
                    return "M" + d['source'].x + "," + d['source'].y
                        + "S" + d['intermediate'].x + "," + d['intermediate'].y
                        + " " + d['target'].x + "," + d['target'].y;
                });
    
    
                /*
                    update visualization of nodes
                        g <- text
                */
                node_sel.attr('transform', function(d) {
                    return 'translate(' + d.x + ',' + d.y + ')';
                });
    
    
                /*
                    update visualization of description
                        g<-text
                */
                desc_sel.attr('transform', function(d) {
                    return 'translate(' + d.x + ',' + d.y + ')';
                });
    
                // /*
                //     debug: update intermediate nodes' position
                // */
                // var d3 = D3.Default,
                //     inter_node = d3.select('svg#topo_container')
                //                    .select('g.intermediate_nodes')
                //                    .selectAll('circle');
                // inter_node.attr('cx', function(d) { return d.x; })
                //           .attr('cy', function(d) { return d.y; });
            }
    
            function do_one_tick() {
                /*
                    handle one tick on graphic elements.
                */
                var svg = d3.select('svg#topo_container'),
                    link = svg
                            .select('g.links')
                            .selectAll('g.link_container'),
                    node = svg
                            .select('g.nodes')
                            .selectAll('g.node_container'),
                    desc = svg
                            .select('g.desc')
                            .selectAll('g.desc_container');
    
                do_tick(link, node, desc);
            }
    
            d3.select('button#load_btn').on('click', function() {
                load();
            });
    
            d3.select('button#animated_btn').on('click', function() {
                var me = d3.select(this);
                animated = !animated;
                if (animated) {
                    topo['simulation']
                        .force('center', topo['center_force'])
                        .force('charge', topo['charge_force'])
                        .force('link', topo['link_force']);
    
                    do_animated_layout();
    
                    me.text('Animated');
                }
                else {
                    topo['simulation']
                        .force('center', null)
                        .force('charge', null)
                        .force('link', null);
    
                    me.text('Static');
                }
    
            });
    
            d3.select('select#desc_field_selector').on('change', function() {
                var field = this.value,
                    desc_con = d3.select('svg#topo_container')
                             .select('g.desc')
                             .selectAll('g.desc_container');
    
                desc_con.select('text').text(function(d) {
                    return d[field];
                });
            });
    
            initialize_topo();
            load();
    
        </script>
    </body>
    </html>

/**
     * d3.tip
     * Copyright (c) 2013-2017 Justin Palmer
     *
     * Tooltips for d3.js SVG visualizations
     */
    // eslint-disable-next-line no-extra-semi
    ;(function(root, factory) {
      if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module with d3 as a dependency.
        define([
          'd3-collection',
          'd3-selection'
        ], factory)
      } else if (typeof module === 'object' && module.exports) {
        /* eslint-disable global-require */
        // CommonJS
        var d3Collection = require('d3-collection'),
            d3Selection = require('d3-selection')
        module.exports = factory(d3Collection, d3Selection)
        /* eslint-enable global-require */
      } else {
        // Browser global.
        var d3 = root.d3
        // eslint-disable-next-line no-param-reassign
        root.d3.tip = factory(d3, d3)
      }
    }(this, function(d3Collection, d3Selection) {
      // Public - contructs a new tooltip
      //
      // Returns a tip
      return function() {
        var direction   = d3TipDirection,
            offset      = d3TipOffset,
            html        = d3TipHTML,
            rootElement = document.body,
            node        = initNode(),
            svg         = null,
            point       = null,
            target      = null,
            follow_mouse  = d3FollowMouse;
    
        function tip(vis) {
          svg = getSVGNode(vis)
          if (!svg) return
          point = svg.createSVGPoint()
          rootElement.appendChild(node)
        }
    
        // Public - show the tooltip on the screen
        //
        // Returns a tip
        tip.show = function() {
          var args = Array.prototype.slice.call(arguments)
          if (args[args.length - 1] instanceof SVGElement) target = args.pop()
    
          var content = html.apply(this, args),
              poffset = offset.apply(this, args),
              dir     = direction.apply(this, args),
              use_mouse_pos = Boolean(follow_mouse.apply(this, args)),
              nodel   = getNodeEl(),
              i       = directions.length,
              coords,
              scrollTop  = document.documentElement.scrollTop ||
                rootElement.scrollTop,
              scrollLeft = document.documentElement.scrollLeft ||
                rootElement.scrollLeft
    
          nodel.html(content)
            .style('opacity', 1).style('pointer-events', 'all')
    
          while (i--) nodel.classed(directions[i], false)
    
          if (use_mouse_pos) {
              var abs_pos = d3Selection.mouse(d3Selection.selection().node());
              nodel.style('top', (d3Selection.event.y + poffset[1]) + 'px')
                   .style('left', (d3Selection.event.x + poffset[0]) + 'px');
              // nodel.style('top', (d3Selection.event.y) + 'px')
              //      .style('left', (d3Selection.event.x) + 'px');
          }
          else {
    
              coords = directionCallbacks.get(dir).apply(this)
              nodel.classed(dir, true)
                .style('top', (coords.top + poffset[0]) + scrollTop + 'px')
                .style('left', (coords.left + poffset[1]) + scrollLeft + 'px')
              }
    
          return tip
        }
    
        // Public - hide the tooltip
        //
        // Returns a tip
        tip.hide = function() {
          var nodel = getNodeEl()
          nodel.style('opacity', 0).style('pointer-events', 'none')
          return tip
        }
    
        // Public: Proxy attr calls to the d3 tip container.
        // Sets or gets attribute value.
        //
        // n - name of the attribute
        // v - value of the attribute
        //
        // Returns tip or attribute value
        // eslint-disable-next-line no-unused-vars
        tip.attr = function(n, v) {
          if (arguments.length < 2 && typeof n === 'string') {
            return getNodeEl().attr(n)
          }
    
          var args =  Array.prototype.slice.call(arguments)
          d3Selection.selection.prototype.attr.apply(getNodeEl(), args)
          return tip
        }
    
        // Public: Proxy style calls to the d3 tip container.
        // Sets or gets a style value.
        //
        // n - name of the property
        // v - value of the property
        //
        // Returns tip or style property value
        // eslint-disable-next-line no-unused-vars
        tip.style = function(n, v) {
          if (arguments.length < 2 && typeof n === 'string') {
            return getNodeEl().style(n)
          }
    
          var args = Array.prototype.slice.call(arguments)
          d3Selection.selection.prototype.style.apply(getNodeEl(), args)
          return tip
        }
    
        // Public: Set or get the direction of the tooltip
        //
        // v - One of n(north), s(south), e(east), or w(west), nw(northwest),
        //     sw(southwest), ne(northeast) or se(southeast)
        //
        // Returns tip or direction
        tip.direction = function(v) {
          if (!arguments.length) return direction
          direction = v == null ? v : functor(v)
    
          return tip
        }
    
        // Public: Sets or gets the offset of the tip
        //
        // v - Array of [x, y] offset
        //
        // Returns offset or
        tip.offset = function(v) {
          if (!arguments.length) return offset
          offset = v == null ? v : functor(v)
    
          return tip
        }
    
        // Public: sets or gets the html value of the tooltip
        //
        // v - String value of the tip
        //
        // Returns html value or tip
        tip.html = function(v) {
          if (!arguments.length) return html
          html = v == null ? v : functor(v)
    
          return tip
        }
    
        // Public: sets or gets the root element anchor of the tooltip
        //
        // v - root element of the tooltip
        //
        // Returns root node of tip
        tip.rootElement = function(v) {
          if (!arguments.length) return rootElement
          rootElement = v == null ? v : functor(v)
    
          return tip
        }
    
        // Public: sets or gets the follow_mouse option value.
        //
        // v - boolean value
        //
        // Returns root node of tip
        // note:
        //      added by lwb
        tip.followMouse = function(v) {
            if (!arguments.length) {
                return follow_mouse;
            }
            else {
                follow_mouse = v == null ? v : functor(v);
                return tip;
            }
        }
    
        // Public: destroys the tooltip and removes it from the DOM
        //
        // Returns a tip
        tip.destroy = function() {
          if (node) {
            getNodeEl().remove()
            node = null
          }
          return tip
        }
    
        function d3TipDirection() { return 'n' }
        function d3TipOffset() { return [0, 0] }
        function d3TipHTML() { return ' ' }
        function d3FollowMouse() {return false;}
    
        var directionCallbacks = d3Collection.map({
              n:  directionNorth,
              s:  directionSouth,
              e:  directionEast,
              w:  directionWest,
              nw: directionNorthWest,
              ne: directionNorthEast,
              sw: directionSouthWest,
              se: directionSouthEast
            }),
            directions = directionCallbacks.keys()
    
        function directionNorth() {
          var bbox = getScreenBBox()
          return {
            top:  bbox.n.y - node.offsetHeight,
            left: bbox.n.x - node.offsetWidth / 2
          }
        }
    
        function directionSouth() {
          var bbox = getScreenBBox()
          return {
            top:  bbox.s.y,
            left: bbox.s.x - node.offsetWidth / 2
          }
        }
    
        function directionEast() {
          var bbox = getScreenBBox()
          return {
            top:  bbox.e.y - node.offsetHeight / 2,
            left: bbox.e.x
          }
        }
    
        function directionWest() {
          var bbox = getScreenBBox()
          return {
            top:  bbox.w.y - node.offsetHeight / 2,
            left: bbox.w.x - node.offsetWidth
          }
        }
    
        function directionNorthWest() {
          var bbox = getScreenBBox()
          return {
            top:  bbox.nw.y - node.offsetHeight,
            left: bbox.nw.x - node.offsetWidth
          }
        }
    
        function directionNorthEast() {
          var bbox = getScreenBBox()
          return {
            top:  bbox.ne.y - node.offsetHeight,
            left: bbox.ne.x
          }
        }
    
        function directionSouthWest() {
          var bbox = getScreenBBox()
          return {
            top:  bbox.sw.y,
            left: bbox.sw.x - node.offsetWidth
          }
        }
    
        function directionSouthEast() {
          var bbox = getScreenBBox()
          return {
            top:  bbox.se.y,
            left: bbox.se.x
          }
        }
    
        function initNode() {
          var div = d3Selection.select(document.createElement('div'))
          div
            .style('position', 'absolute')
            .style('top', 0)
            .style('opacity', 0)
            .style('pointer-events', 'none')
            .style('box-sizing', 'border-box')
    
          return div.node()
        }
    
        function getSVGNode(element) {
          var svgNode = element.node()
          if (!svgNode) return null
          if (svgNode.tagName.toLowerCase() === 'svg') return svgNode
          return svgNode.ownerSVGElement
        }
    
        function getNodeEl() {
          if (node == null) {
            node = initNode()
            // re-add node to DOM
            rootElement.appendChild(node)
          }
          return d3Selection.select(node)
        }
    
        // Private - gets the screen coordinates of a shape
        //
        // Given a shape on the screen, will return an SVGPoint for the directions
        // n(north), s(south), e(east), w(west), ne(northeast), se(southeast),
        // nw(northwest), sw(southwest).
        //
        //    +-+-+
        //    |   |
        //    +   +
        //    |   |
        //    +-+-+
        //
        // Returns an Object {n, s, e, w, nw, sw, ne, se}
        function getScreenBBox() {
          var targetel   = target || d3Selection.event.target
    
          while (targetel.getScreenCTM == null && targetel.parentNode == null) {
            targetel = targetel.parentNode
          }
    
          var bbox       = {},
              matrix     = targetel.getScreenCTM(),
              tbbox      = targetel.getBBox(),
              width      = tbbox.width,
              height     = tbbox.height,
              x          = tbbox.x,
              y          = tbbox.y
    
          point.x = x
          point.y = y
          bbox.nw = point.matrixTransform(matrix)
          point.x += width
          bbox.ne = point.matrixTransform(matrix)
          point.y += height
          bbox.se = point.matrixTransform(matrix)
          point.x -= width
          bbox.sw = point.matrixTransform(matrix)
          point.y -= height / 2
          bbox.w = point.matrixTransform(matrix)
          point.x += width
          bbox.e = point.matrixTransform(matrix)
          point.x -= width / 2
          point.y -= height / 2
          bbox.n = point.matrixTransform(matrix)
          point.y += height
          bbox.s = point.matrixTransform(matrix)
    
          return bbox
        }
    
        // Private - replace D3JS 3.X d3.functor() function
        function functor(v) {
          return typeof v === 'function' ? v : function() {
            return v
          }
        }
    
        return tip
      }
    // eslint-disable-next-line semi
    }));

{
        "topo": {
            "nodes": [
                {"knmp_on": false, "snmp_on": true, "ip": "192.168.2.55", "vlan": 1, "flag": 0, "netmask": "255.255.255.0", "device_name": "device_2", "mac": "00-11-22-33-44-55", "ip_on": false, "id": "s2", "gateway": "0.0.0.0"}, 
                {"knmp_on": true, "snmp_on": true, "ip": "192.168.2.66", "vlan": 1, "flag": 0, "netmask": "255.255.255.0", "device_name": "device_1", "mac": "11-22-33-44-55-66", "ip_on": true, "id": "s1", "gateway": "0.0.0.0"},
                {"knmp_on": true, "snmp_on": false, "ip": "192.168.2.77", "vlan": 1, "flag": 0, "netmask": "255.255.255.0", "device_name": "device_3", "mac": "22-33-44-55-66-77", "ip_on": true, "id": "s3", "gateway": "0.0.0.0"},
                {"knmp_on": false, "snmp_on": false, "ip": "192.168.2.99", "vlan": 1, "flag": 0, "netmask": "255.255.255.0", "device_name": "device_4", "mac": "44-55-66-77-88-99", "ip_on": false, "id": "s4", "gateway": "0.0.0.0"},
                {"knmp_on": true, "snmp_on": true, "ip": "192.168.2.33", "vlan": 1, "flag": 0, "netmask": "255.255.255.0", "device_name": "device_0", "mac": "55-66-77-88-99-00", "ip_on": true, "id": "s0", "gateway": "0.0.0.0"},
                 {"knmp_on": false, "snmp_on": true, "ip": "192.168.2.34", "vlan": 1, "flag": 0, "netmask": "255.255.255.0", "device_name": "device_0", "mac": "55-66-77-88-99-00", "ip_on": true, "id": "s5", "gateway": "0.0.0.0"}],
    
            "links": [
                {"source": "s1", "target_port_disp": "port_3", "source_port_disp": "port_4", "target": "s4"},
                {"source": "s3", "target_port_disp": "port_13", "source_port_disp": "port_20", "target": "s4"},
                {"source": "s2", "target_port_disp": "port_10", "source_port_disp": "port_13", "target": "s3"},
                {"source": "s1", "target_port_disp": "port_4", "source_port_disp": "port_3", "target": "s2"},
                {"source": "s2", "target_port_disp": "port_22", "source_port_disp": "port_1", "target": "s3"},
                {"source": "s1", "target_port_disp": "port_7", "source_port_disp": "port_9", "target": "s2"},
                {"source": "s1", "target_port_disp": "port_1", "source_port_disp": "port_2", "target": "s4"},
                {"source": "s3", "target_port_disp": "port_5", "source_port_disp": "port_6", "target": "s4"},
                {"source": "s3", "target_port_disp": "port_5", "source_port_disp": "port_6", "target": "s5"}
            ]
        }
    }

Demo

[Network Topology Implemented with D3js.![icon-default.png_t_LA23][]https://semonalbertyeah.github.io/d3-network-topology/][Network Topology Implemented with D3js._icon-default.png_t_LA23_https_semonalbertyeah.github.io_d3-network-topology]![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16][]

[https://github.com/semonalbertyeah/d3-network-topology![icon-default.png?t=LA23][icon-default.png_t_LA23]https://github.com/semonalbertyeah/d3-network-topology][https_github.com_semonalbertyeah_d3-network-topology_icon-default.png_t_LA23_icon-default.png_t_LA23_https_github.com_semonalbertyeah_d3-network-topology]

[icon-default.png_t_LA23]: https://csdnimg.cn/release/blog_editor_html/release1.9.3/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=LA23
[Network Topology Implemented with D3js._icon-default.png_t_LA23_https_semonalbertyeah.github.io_d3-network-topology]: https://semonalbertyeah.github.io/d3-network-topology/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/54365b103738490bb9f82d5a4e2fa9a0.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[https_github.com_semonalbertyeah_d3-network-topology_icon-default.png_t_LA23_icon-default.png_t_LA23_https_github.com_semonalbertyeah_d3-network-topology]: https://github.com/semonalbertyeah/d3-network-topology