创建具有多个级别的图形

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
        }
    });