Question

我已为每个节点分配了级别。现在在每个级别上，我希望节点以插入的顺序出现。这甚至是文档所说的。我已经看到很多例子发生了，只与我的情况不同的是：X轴上也有边缘。

这是一个片段：

＆＃13;

function main() {
  var graph = {
    nodes: new vis.DataSet([
      { "id": "M1", "label": "M1", "level": 0 },
      { "id": "R1", "label": "R1", "level": 0 },
      { "id": "W1", "label": "W1", "level": 0 },

      { "id": "C1R1", "label": "C1R1", "level": 1 },

      { "id": "C2R1", "label": "C2R1", "level": 1 },
      { "id": "R2R1", "label": "R2R1", "level": 1 },
      { "id": "W2R1", "label": "W2R1", "level": 1 },
      { "id": "C3R1", "label": "C3R1", "level": 1 }

    ]),
    edges: new vis.DataSet([
      { "from": "M1", "to": "R1" },
      { "from": "W1", "to": "R1" },
      { "from": "M2", "to": "R2" },
      { "from": "W2", "to": "R2" },

      { "from": "R1", "to": "C1R1" },
      { "from": "R1", "to": "C2R1" },
      { "from": "C2R1", "to": "R2R1" },
      { "from": "W2R1", "to": "R2R1" },
      { "from": "R1", "to": "C3R1" }
    ])
  };

  var options = {
    nodes: {
      borderWidth: 1,
      borderWidthSelected: 1,
      shape: "box",
      color: {
        border: 'lightgray',
        background: 'white',
        highlight: {
          border: 'lightgray',
          background: 'lightblue'
        },
        hover: {
          border: 'lightgray',
          background: 'lightblue'
        }
      }
    },
    edges: {
      smooth: {
        type: 'cubicBezier',
        forceDirection: 'vertical',
        roundness: 1
      },
      color: 'lightgray'
    },
    layout: {
      hierarchical: {
        direction: 'UD',
        nodeSpacing: 150
      }
    },
    interaction: {
      dragNodes: true
    },
    physics: false,
    edgeMinimization: false,
    blockShifting: false
  };
  var network = new vis.Network(document.getElementById("network"), graph, options);
}

＆＃13;

#network {
  width: 100%;
  height: 180px;
}

＆＃13;

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.css" />
</head>

<body onload="main();">
  <div id="network"></div>
</body>

＆＃13;

主要是：

var nodes = new vis.DataSet([
    {"id": "M1", "label": "M1", "level": 0},
    {"id": "R1", "label": "R1", "level": 0},
    {"id": "W1", "label": "W1", "level": 0}, 

    {"id": "C1R1", "label": "C1R1", "level": 1},

    {"id": "C2R1", "label": "C2R1", "level": 1},
    {"id": "R2R1", "label": "R2R1", "level": 1},
    {"id": "W2R1", "label": "W2R1", "level": 1},
    {"id": "C3R1", "label": "C3R1", "level": 1}                      

]);

这是一棵家谱，所以我希望丈夫，妻子和婚姻节点保持在一起。

这就是我得到的：

这就是我要找的：

基本上在X轴上，节点应按插入顺序显示（因此不会交叉或重叠）。

我试过将边缘最小化保持为false，将blockShifting保持为false。甚至通过给出x位置来尝试，但它仍然会自行调整。

请告诉我是否有办法获得它或没有办法。

Answer 1

我最终决定通过计算每个节点的位置并修复它来解决它。

确定形状和相应的大小以及每个节点所需的间距。

已经定义了级别，以便为您提供每个节点的“ y”坐标。

对于“ x”坐标，假设每个节点需要30 px的空间，并且您希望在每一侧上保持5 px的边距，因此总计40 px。

在每个级别上，对于每个节点，您需要计算绘制其所有子节点并递归继续所需的x空间（宽度）。

在上面的示例中，R1需要x的宽度为200（40 * 5）px，因此只能在此之后或之前绘制M1和W1。 R1可以在200 px宽度的中心处绘制，我们可以通过分别使用40px来获得C1R1，C2R1，R2R2，W2R1和C3R1的位置。

如果我们从-200，0开始绘制

然后

M1 =>  x : -180, y : 0 (occupying space from -200 to -160)
R1 =>  x : -60, y : 0 (occupying space from -160 to 40)
W1 =>  x : 60, y: 0 (occupying space from 40 to 80)

C1R1 => -140, y: 40 (occupying space from -160 to -120)
C2R1 => -100, y: 40 (occupying space from -120 to -80)
R2R2 => -60, y: 40 (occupying space from -80 to -40)
W2R1 => -20, y: 40 (occupying space from -40 to 0)
C3R1 => 20, y: 40 (occupying space from 0 to 40)

让我知道您是否要我编写确切的代码。对我来说，这是非常不同的，因为我有不同大小的节点以及其他一些关系，等等。

分层布局：未按照同一级别的插入顺序创建的节点

1 个答案: