Question

我有一个vis.js网络图，其中包含节点之间的多个边缘，我也尝试使用分层布局进行设置。如果我在没有分层布局选项的情况下执行普通图形，则在节点之间显示多条线，但是，一旦我在分层布局选项中打开/放置，则只绘制一条线。

下面是两个显示我的意思的掠夺者：

https://plnkr.co/edit/c8SuBc0XjDZnn6im2vdg（关闭分层布局的Plunker）

var options = { 
    height: '400px', 
    edges: { smooth: true, shadow: true},
    layout: {
       randomSeed: 1,
       improvedLayout: true,
       hierarchical: {
           enabled: false, //change to true to see the other graph
           direction: 'UD',
           sortMethod: 'directed'
      }
   }
}

https://plnkr.co/edit/L22bHk6kh1XKXulTjESD（具有分层布局的Plunker）

var options = { 
    height: '400px', 
    edges: { smooth: true, shadow: true},
    layout: {
       randomSeed: 1,
       improvedLayout: true,
       hierarchical: {
           enabled: true, //change to true to see the other graph
           direction: 'UD',
           sortMethod: 'directed'
      }
   }
}

如您所见，在第二个节点中，从节点1到节点3的2个边缘在视觉上折叠成一个边缘。任何帮助都会很棒。

Answer 1

我需要同样的东西，所以我搜索并找到了你的问题：）

似乎没有其他方法可以做到这一点，只能通过边缘属性，如下所示（参见下面的工作片段）：

var edges = new vis.DataSet([
  {from: 1, to: 3, arrows: 'to', label: "+++++", smooth: {type: "curvedCCW", roundness: 0.4}},
  {from: 1, to: 3, arrows: 'to', label: "-----", smooth: {type: "curvedCCW", roundness: 0.2}},
  {from: 1, to: 3, arrows: 'to', label: "11111", smooth: {type: "curvedCW", roundness: 0.2}},
  {from: 1, to: 3, arrows: 'to', label: "22222", smooth: {type: "curvedCW", roundness: 0.4}},
]);

请在此问题上分享您的发现

// create an array with nodes
var nodes = new vis.DataSet([
  {id: 1, label: 'Node 1', level: 0},
  {id: 2, label: 'Node 2', level: 1},
  {id: 3, label: 'Node 3', level: 1},
  {id: 4, label: 'Node 4', level: 2},
  {id: 5, label: 'Node 5', level: 2}
]);

// create an array with edges
var edges = new vis.DataSet([
  {from: 1, to: 3, arrows: 'to', label: "+++++", smooth: {type: "curvedCCW", roundness: 0.4}},
  {from: 1, to: 3, arrows: 'to', label: "-----", smooth: {type: "curvedCCW", roundness: 0.2}},
  {from: 1, to: 3, arrows: 'to', label: "11111", smooth: {type: "curvedCW", roundness: 0.2}},
  {from: 1, to: 3, arrows: 'to', label: "22222", smooth: {type: "curvedCW", roundness: 0.4}},
  {from: 1, to: 2, arrows: 'to'},
  {from: 2, to: 4, arrows: 'to'},
  {from: 2, to: 5},
  {from: 3, to: 3}
]);

// create a network
var container = document.getElementById('mynetwork');
var data = {
  nodes: nodes,
  edges: edges
};
var options = {
  interaction: {
      hover:true, 
      tooltipDelay: 300
  }, 
  height: '400px', 
  edges: { smooth: true
  },
  layout: {
      randomSeed: 1,
      improvedLayout: true,
      hierarchical: {
          enabled: true, //change to true to see the other graph
          direction: 'UD',
          nodeSpacing: 150,
          sortMethod: 'directed'
      }
  },
  configure: {},
  "physics": {
  "enabled": false,
  "minVelocity": 0.75
}
};
var network = new vis.Network(container, data, options);

#mynetwork {
  width: 600px;
  height: 400px;
  border: 1px solid lightgray;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css" rel="stylesheet" type="text/css">

<div id="mynetwork"><div class="vis-network" tabindex="900" style="position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;"><canvas width="600" height="400" style="position: relative; touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;"></canvas></div></div>

节点之间的多条线和vis.js中的分层布局

1 个答案: