如何使用 vis.js 强制边缘方向？

Posted 2023-05-08

【中文标题】如何使用 vis.js 强制边缘方向？

【英文标题】：How to force edge direction using vis.js?

【发布时间】：2019-10-28 09:50:11

【问题描述】：

我无法强制 vis 网络中的边缘向一个方向移动。 问题似乎是该库更喜欢层次结构中恰好只有 1 级长的边。

使用的布局代码：

layout: 
  hierarchical: 
    direction: "LR",
    sortMethod: 'directed'
  

您可以通过this JSFiddle 或下图了解我的意思。

我希望节点 1 与 2 和 3 位于同一行，从而在 4 中形成一个短箭头，在 6 中形成一个长箭头。相反，它现在将 1 放在 4 之后，导致边缘指向左侧。

【参考方案1】：

请注意下面的代码。

您可以通过为每个节点定义级别强制水平布局来实现此目的。

1 级：1、2、3 2级：4 3级：5 4级：6、7 5级：8

等等……

const container = document.getElementById("mynetwork");
const nodes = new vis.DataSet([
    
      id: 1,
      label: "1",
      level: 1
    ,
    
      id: 2,
      label: "2",
      level: 1
    ,
    
      id: 3,
      label: "3",
      level: 1
    ,
    
      id: 4,
      label: "4",
      level: 2
    ,
    
      id: 5,
      label: "5",
      level: 3
    ,
    
      id: 6,
      label: "6",
      level: 4
    ,
    
      id: 7,
      label: "7",
      level: 4
    ,
    
      id: 8,
      label: "8",
      level: 5
    
  ]);

  const edges = new vis.DataSet([
     from: 1, to: 4 ,
     from: 3, to: 4 ,
     from: 2, to: 4 ,
     from: 4, to: 5 ,
     from: 6, to: 8 ,
     from: 5, to: 7 ,
     from: 1, to: 6 ,
     from: 7, to: 8 
  ]);
  const data = 
    nodes: nodes,
    edges: edges
  ;
  const options = 
    nodes: 
      font: 
        size: 22
      ,
    ,
    edges: 
      font: 
        align: "top"
      ,
      arrows: 
        to:  enabled: true, scaleFactor: 1, type: "arrow" 
      
    ,
    layout: 
   hierarchical: 
      enabled: true,
      levelSeparation: 200,
      nodeSpacing: 70,
      treeSpacing: 100,
      blockShifting: true,
      edgeMinimization: true,
      parentCentralization: true,
      direction: "LR", // UD, DU, LR, RL
      sortMethod: "hubsize", // hubsize, directed
    ,
    ,
    interaction: 
      tooltipDelay: 200,
      hover: true
    ,
  ;
   const network = new vis.Network(container, data, options);

#mynetwork 
  position: absolute;
  top: 0px; right: 0px; bottom: 0px; left: 0px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet"/>

<div id="mynetwork">

</div>