Question

我正在使用vis.js来构建故事可视化工具，关键功能是允许作者通过拖动手动定位节点。通常还有几个边具有相同的源节点和目标节点。没有物理学，这些边缘重叠。

目前为避免边缘重叠，每当创建新边缘以相互排斥任何重叠边缘时，我都会在小间隔内启用物理。理想情况下，我总是禁用物理，边缘不会重叠，但我认为这不可能。

是否有关于如何应用可见物理的建议，以便在节点拖动时禁用它，快速稳定还可以防止边缘重叠？

Answer 1

如果有人遇到此问题，解决方法是根据有多少边具有相同的源节点和目标节点来计算每条边的圆度。

示例：http://jsbin.com/wojanuboxi/edit?html,js,output

 var nodes = new vis.DataSet([
 {id: 1, label: '1'},
 {id: 2, label: '2'},
 {id: 3, label: '3'}
]);
var edges = new vis.DataSet([
  {id: 1, from: 1, to: 2, smooth: {type: 'curvedCW', roundness: 0.2}},
  {id: 2, from: 1, to: 2, smooth: {type: 'curvedCW', roundness: -2.2}},
  {id: 5, from: 1, to: 2, label: 5,  smooth: {type: 'curvedCW', roundness: 0.4}},
  {id: 6, from: 1, to: 2, label: 6, smooth: {type: 'curvedCW', roundness: -2.4}},

  {id: 3, from: 1, to: 3, smooth: {type: 'curvedCW', roundness: -2.1}},
  {id: 4, from: 1, to: 3, smooth: {type: 'curvedCW', roundness: 0.1}}
]);
var data = {
  nodes: nodes,
  edges: edges
};
var options = {
  physics: false,
  layout: {
    hierarchical: {
      direction: 'UD'
    }
  }
};

var networkContainer = document.getElementById('networkContainer');
var network = new vis.Network(networkContainer, data, options);

在vis.js中避免使用最小物理重叠边缘

1 个答案: