创建具有多个级别的图形

Question

我需要创建一个具有动态顶点数的图形，如下所示 enter image description here

哪种布局最适合用于获取垂直顶点？

Answer 1

强制定向图可能是您问题的解决方案。以下是一些选项：

1. https://zoomcharts.com/en/chart-types-demo/graph-chart-using-netchart
2. https://bl.ocks.org/mbostock/4062045
3. http://visjs.org/examples/network/basicUsage.html

如果你想以垂直方式明确地进行布局，你可能需要考虑这里的分层或固定布局：

http://jsfiddle.net/L9m34ev5/1/

 var t = new NetChart({
        container: document.getElementById("demo"),
        area: { height: null },
        navigation:{
            focusNodeExpansionRadius: 2,
            initialNodes: ["syslog"],
            mode:"focusnodes"
        },
        style:{
            node:{display:"image",lineWidth:2, lineColor: "red", imageCropping: true},
            nodeStyleFunction: function(node){node.radius = 50;}
        },
        data: { url:"https://zoomcharts.com/dvsl/data/net-chart/bubbles.json" },
        layout:{
            mode:"hierarchy",
            nodeSpacing: 45, // horizontal spacing between nodes
            rowSpacing: 80, // vertical spacing between node rows in the hierarchy layout
            rotation: 90
        }
    });