Question

是否可以在vis.js中使用分层布局中的节点而不在X轴上重叠？

我尝试添加选项：

    var options = {
        layout: {
            hierarchical: {
                direction: "UD",
                sortMethod: "directed"
            },
            physics: {
                solver: "barnesHut"
                ,barnesHut: {
                    avoidOverlap: 1
                }
            }
        }
    };

Answer 1

您可以为初始布局增加layout.hierarchical.nodeSpacing。

＆＃13;

// create an array with nodes
var nodes = new vis.DataSet([
  {id: 1, label: 'Node 1 with lage text'},
  {id: 2, label: 'Node 2 with lage text'},
  {id: 3, label: 'Node 3 with lage text'},
  {id: 4, label: 'Node 4 with lage text'},
  {id: 5, label: 'Node 5 with lage text'}
]);

// create an array with edges
var edges = new vis.DataSet([
  {from: 1, to: 3},
  {from: 1, to: 2},
  {from: 2, to: 4},
  {from: 2, to: 5}
]);

// create a network
var container = document.getElementById('mynetwork');
var data = {
  nodes: nodes,
  edges: edges
};
var options = {
  layout: {
    hierarchical: {
      direction: "UD",
      sortMethod: "directed",
      nodeSpacing: 200  // <-- !!!!!!!
    }
  },
  physics: false
};
var network = new vis.Network(container, data, options);

＆＃13;

#mynetwork {
  width: 100%;
  height: 100%;
  border: 1px solid lightgray;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js" type="text/javascript"></script>
  <link  href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mynetwork"></div>
</body>
</html>

＆＃13;

Answer 2

另一个解决方案可能是

myVisOptions = {
    layout: {
        hierarchical: {
            direction: "UD",
            sortMethod: "directed",
            shakeTowards: 'roots'
        }
    },
    physics: {
        // https://visjs.github.io/vis-network/docs/network/physics.html
        enabled: true,
        hierarchicalRepulsion: {
            avoidOverlap: 0.99
        },
        stabilization: {
            iterations: 2000,
            updateInterval: 100
        },
        solver: 'hierarchicalRepulsion'
    },
    nodes: {
        margin: 8,
        shape: 'box',
        font: {size: 20},
        color: {
            background: 'white',
            border: '#ffc468',
            hover: '#ffc468',
            highlight: '#ffc468'//, '#bd6500'
        },
    }
};

vis.js大型节点在分层模式下重叠

2 个答案: