Мультиграфы с JavaScript

Question

Прежде всего посмотрите на этот вопрос.

Ни одна из этих библиотек не поддерживает Мультиграфы (или псевдографы).Я имею в виду, что я не могу генерировать графики, подобные этому:

Есть ли какой-либо плагин (или библиотека javascript) для этой цели?

Я подумаля могу использовать API WolframAlpha и использовать его изображения, что-то вроде this :

, но у него много проблем:

1. Я не могу перемещать узлы или добавлять и удалять края в интерактивном режиме.

2. Только 2000 вызовов API в месяц.Недостаточно.

3. Я не могу создать большие или промежуточные графики.

4. Это действительно безобразно!

Пожалуйста, помогите мне, если вы знаете какую-то библиотеку javascript для рисования мультиграфов или в любом случае для создания таких графиков (что-то вроде Библиотека графов Дракулы , но с возможностью рисовать мультиграфы).

Кстати, я больше не хочу использовать Adobe Flash вместо javascript (для меня приемлемы любые другие решения)

Заранее спасибо.

Answer 1

Вот пример реализации вашего мультиграфа в vis.js (информация: ребра , узлы , физика )

var len = undefined;
    var red = {color:'red'};
    var black = {color:'black'};
    var blue = {color:'blue'};
    var gray = {background: '#c0c0c0', border: '#000',
    highlight:{background:'red',border:'black', color:blue}};

    var nodes = new vis.DataSet([
        {id: 1, color:gray}, // you can add: label: "Hi"
        {id: 2, color:gray},
        {id: 3, color:gray},
        {id: 4, color:gray},
        {id: 5, color:gray},
        {id: 6, color:gray}, 
    ]);
    var edges = [
      {from: 1, to: 5, color: red},
      {from: 1, to: 6, color: red},
      {from: 1, to: 6, color: red},
      {from: 1, to: 6, color: red},
      {from: 1, to: 2, color: black},
      
      {from: 2, to: 6, color: black},
      {from: 2, to: 2, color: blue},
      {from: 2, to: 3, color: black},
            
      {from: 3, to: 6, color: red},
      {from: 3, to: 6, color: red},
      {from: 3, to: 3, color: blue},
      {from: 3, to: 4, color: black},
      
      {from: 4, to: 4, color: blue},
      {from: 4, to: 5, color: black},
      {from: 4, to: 6, color: red},
      {from: 4, to: 6, color: red},
      
      {from: 5, to: 1, color: red},
      {from: 5, to: 6, color: black},
    ]

    // create a network
    var container = mynetwork;
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {
        nodes: {
            shape: 'dot',
            size: 12,
            font: {
                size: 22,
                color: '#000000'
            },
            borderWidth: 1.5
        },
        edges: {
            width: 3,
            selfReferenceSize:40,
            length:80,
            color : {
              highlight: "green"
            }
        }
    };
    network = new vis.Network(container, data, options);

#mynetwork {
  width: 100%;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>

<div id="mynetwork"></div>