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

Ответ 1

Cytoscape.JS поддерживает мультиграфы, является чистым Javascript и использует новый холст HTML 5 для производительности. Его цель дизайна - визуализация/манипулирование графикой общего назначения.

http://cytoscape.github.com/cytoscape.js/

Ответ 2

Если вам разрешено использовать Google Charts API, вы можете обратиться к этому

http://code.google.com/apis/chart/image/docs/gallery/graphviz.html

Пример:

https://chart.googleapis.com/chart?cht=gv&chl=graph {C_0 - H_0 [type = s]; C_0 --H_1 [тип = s]; C_0 - H_2 [тип = s]; C_0 - C_1 [тип = s]; C_1 - H_3 [тип = s]; C_1 - H_4 [тип = с]; C_1 --H_5 [= типа с]}

Ответ 3

Я боюсь, вам придется самому заниматься разработкой. Raphael.js вполне способен создавать и манипулировать svg - будет хорошей отправной точкой

Ответ 4

Некоторые из этих библиотек визуализации графа (упомянутых в этом вопросе) DO поддерживают мультиграфы и позволяют перетаскивать/размещать узлы

jsplumb: http://jsplumb.org/jquery/stateMachineDemo.html

возможно http://js-graph-it.sourceforge.net/ может поддерживать мультиграфы.

но насколько ваша проблема

4 Это действительно уродливо!

Они могут не понравиться вашей эстетике.

Ответ 5

Вы можете проверить это: www.d3js.org

Вам нужно будет много сделать (создать собственный SVG и т.д.), но библиотека очень мощная.

Ответ 6

Недавно я использовал Graphviz для создания связей между некоторыми публикациями авторов. Graphviz - программное обеспечение визуализации с открытым исходным кодом. Программы макета Graphviz описывают графики на простом текстовом языке и делают диаграммы в полезных форматах, таких как изображения и SVG для веб-страниц, PDF или Postscript для включения в другие документы; или отображение в интерактивном графическом браузере.

Например, я использовал простой файл DOT для записи всех связей между авторами, и я создал PNG файл.

http://www.graphviz.org/

Здесь есть вся необходимая документация, и в разделе галереи вы можете увидеть много примеров вывода.

Надеясь, что это может быть полезно.

Ответ 7

Лучше всего было бы сделать их на сервере (или использовать его как апплет) с JGraphT.

Ответ 8

Я думаю, что paper.js(http://paperjs.org) также будет очень близким.

Ответ 9

В коммерческом сценарии взгляните на yFiles для HTML:

Он легко поддерживает многографы и не выглядит слишком уродливым, я считаю:

^{(Эти графики выложены автоматически, возможно ручное размещение.)}

Конечно, это вопрос вкуса, поэтому, если вам не нравится внешний вид, вы можете изменить любой аспект визуализации, например, в стиль учебника.

API предлагает полные возможности интерактивного редактирования и является чистым клиентским решением, конечно же, нет ограничения количества вызовов API.

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

Отказ от ответственности: я работаю в компании, которая создает библиотеку, на SO/SE, но я не представляю своего работодателя. Мои сообщения и комментарии являются моими.

Ответ 10

Вы можете проверить jsnetworkx (http://jsnetworkx.org/)

Это js-версия библиотеки графиков python, которая поддерживает мультиграфию. Он имеет функцию draw, которая визуализирует график, используя D3.js. Он доступен как для браузера, так и для node.js.

Ответ 11

Вот пример реализации вашего мультиграфа в 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>