Как избежать наложения ребер с минимальной физикой в ​​vis.js

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);