Question

我正在尝试使用vis.js创建层次结构图。我可以创建层次图，但是布局并不是我想要的：节点处于看似随意的级别。我希望根据节点和根之间的边缘数量将节点置于不同的级别。

数据最初来自SQL。当前，我有一个Python脚本将数据处理为DOT语言（并且可以使用Graphviz显示具有所需布局的图形），所以这就是为什么我使用.convertDot方法的原因。导入vis.js后，我可以对网络进行重新处理，并分别向每个节点添加正确的“级别”属性，但是必须有更好的方法。

这是到目前为止我拥有的完整的HTML / JS文档：

<!DOCTYPE HTML>
<html>
<head>
  <script src="./vis/dist/vis.js"></script>
  <link href="./vis/dist/vis.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="graph", style="height: 1000px"></div> 

  <script> 
    // provide data in the DOT language
    var DOTstring = 'digraph {"13332500" -> "13483400" "13567500" -> "13483400" "10037901" -> "10037902" "10037902" -> "13483400" "15038400" -> "13455700" "13455700" -> "13455702" "13455702" -> "13483400" "13567300" -> "13483400" "11890500" -> "13483400" "13483400" -> "13554900"}';
    var parsedData = vis.network.convertDot(DOTstring);

    var data = {
      nodes: parsedData.nodes,
      edges: parsedData.edges
    }

    var container = document.getElementById('graph');
    var options = parsedData.options;

    // you can extend the options like a normal JSON variable:
    options.layout = {
      "hierarchical": true
    }

    // create a network
    var network = new vis.Network(container, data, options);
  </script>

</body>
</html>

代码将产生以下内容：这是由graphviz制作的我正在寻找的布局：

如果您想知道为什么我已经在graphviz中使它在vis.js中尝试这样做了，原因是我想使其具有交互性。

Answer 1

我想您还没有浏览其他文档。

enter link description here

我希望以上链接将帮助您获得所需的任何自定义。

Answer 2

从vis.js 6.2版开始，有一个新选项允许按需显示图形。使用sortMethod: 'directed'和shakeTowards: 'roots'。

来源

vis-network github issue #176
vis-network docs for layout options（您必须单击“完整选项”标签才能真正看到选项）

示例

在我的原始脚本中修改options.layout可得到所需的结果：

<!DOCTYPE HTML>
<html>
<head>
  <script src="./vis/dist/vis.js"></script>
  <link href="./vis/dist/vis.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="graph", style="height: 1000px"></div> 

  <script> 
    // provide data in the DOT language
    var DOTstring = 'digraph {"13332500" -> "13483400" "13567500" -> "13483400" "10037901" -> "10037902" "10037902" -> "13483400" "15038400" -> "13455700" "13455700" -> "13455702" "13455702" -> "13483400" "13567300" -> "13483400" "11890500" -> "13483400" "13483400" -> "13554900"}';
    var parsedData = vis.network.convertDot(DOTstring);

    var data = {
      nodes: parsedData.nodes,
      edges: parsedData.edges
    }

    var container = document.getElementById('graph');
    var options = parsedData.options;

    // you can extend the options like a normal JSON variable:
    options.layout = {
      hierarchical: {
        sortMethod: 'directed',  // hubsize, directed
        shakeTowards: 'roots',  // roots, leaves
        direction: 'DU'   // UD, DU, LR, RL
        }
    }
    
    // create a network
    var network = new vis.Network(container, data, options);
  </script>

</body>
</html>

在vis.js网络中，如何根据节点的深度自动设置节点的级别？

2 个答案:

来源

示例