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

javascript jquery html html5 graph-theory

11523 просмотра

11 ответа

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

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

Немного Мультиграфа

Существует ли для этой цели какой-либо плагин jQuery (или библиотека javascript)?

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

введите описание изображения здесь

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

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

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

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

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

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

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

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

Автор: linker Источник Размещён: 17.05.2019 02:33

Ответы (11)


10 плюса

Решение

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

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

Автор: Developer Размещён: 11.01.2013 07:04

4 плюса

3 плюса

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

Автор: Konstantin Pribluda Размещён: 29.11.2011 10:05

3 плюса

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

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

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

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

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

Это может не понравиться вашей эстетике.

Автор: Nate- Размещён: 17.01.2012 04:19

2 плюса

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

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

Автор: cantdutchthis Размещён: 15.08.2012 07:02

1 плюс

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

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

http://www.graphviz.org/

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

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

Автор: andreapavan Размещён: 29.11.2011 09:55

1 плюс

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

Автор: Jan Jongboom Размещён: 29.11.2011 10:00

1 плюс

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

Автор: tmaximini Размещён: 26.04.2012 05:49

1 плюс

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

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

Мульти-графики - выкладываются автоматически с использованием yFiles для HTML

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

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

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

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

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

Автор: Sebastian Размещён: 17.01.2014 08:03

1 плюс

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

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

Автор: Zhongjun 'Mark' Jin Размещён: 02.10.2017 06:31

0 плюса

Вот некоторая реализация вашего мультиграфа в 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: 2,
            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>

Автор: Kamil Kiełczewski Размещён: 16.04.2019 08:26
Вопросы из категории :
32x32