Бібліотека візуалізації графіків у JavaScript

У мене є структура даних, яка представляє спрямований графік, і я хочу їх динамічно відобразити на HTML-сторінці. Зазвичай у цих графіків буде лише кілька вузлів, можливо, десять у самому верхньому кінці, тому я гадаю, що продуктивність не буде великою справою. В ідеалі я хотів би мати можливість підключити його до jQuery, щоб користувачі могли налаштувати макет вручну, перетягуючи вузли навколо.

Примітка: я не шукаю бібліотеки графіків.

Я щойно зібрав те, що ви можете шукати: http://www.graphdracula.net

Це JavaScript з спрямованим компонуванням графіків, SVG і ви навіть можете перетягувати вузли навколо. Досі потребує певного налаштування, але він є повністю корисним. Ви легко створюєте вузли та краї за допомогою такого коду JavaScript:

var g = new Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
g.addEdge("id34", "cherry");

Я використовував раніше згадану бібліотеку Raphael JS (приклад граффілів), а також якийсь код для алгоритму компонування графіків, заснованих на силі, який я знайшов у мережі (все з відкритим кодом, ліцензія MIT). Якщо у вас є якісь зауваження або вам потрібна певна функція, я можу це здійснити, просто запитайте!

Ви можете поглянути і на інші проекти! Нижче наведено два мета-порівняння:

• SocialCompare має широкий перелік бібліотек, а рядок "Графік вузла / краю" буде фільтруватися за візуалізацією графіків.

• DataVisualization.ch оцінив багато бібліотек, включаючи вузли / графіки. На жаль, прямого посилання немає, тому вам доведеться фільтрувати за "графіком":

Ось перелік подібних проектів (деякі з них уже згадувалися тут):

Чисті бібліотеки JavaScript

• vis.js підтримує багато типів мережевих / крайових графіків, а також строки та 2D / 3D-графіки. Авто-макет, автоматична кластеризація, пружна фізичний движок, для мобільних пристроїв, навігація за допомогою клавіатури, ієрархічне розташування, анімація і т.д. MIT ліцензовані і розроблений голландською фірмою , що спеціалізується на дослідженнях по самоорганізованих мереж.

• Cytoscape.js - інтерактивний аналіз графіків та візуалізація з мобільною підтримкою, дотримуючись конвенцій jQuery. Фінансується через гранти NIH та розробляє @maxkfranz (див. Його відповідь нижче ) за допомогою кількох університетів та інших організацій.

• Інструментарій JavaScript InfoVis - Jit, інтерактивна, багатоцільова рамка для малювання та компонування графіків. Дивіться, наприклад, Гіперболічне дерево . Побудований у Twitter архітектором данихviz Nicolas Garcia Belmonte та купленим Sencha у 2010 році.

• D3.js Потужна багатоцільова бібліотека візуалізації JS, наступник Protovis. Дивіться приклад графічного спрямованого та інші приклади графіків у галереї .

• Бібліотека візуалізації JS Plotly використовує D3.js із прив'язками JS, Python, R та MATLAB. Див nexworkx приклад в IPython тут , приклад взаємодії людини тут , і JS API вбудовування .

• sigma.js Легка, але потужна бібліотека для малювання графіків

• jsPlumb плагін jQuery для створення інтерактивних підключених графіків

• Springy - алгоритм компонування графа, спрямованого на силу

• Processing.js Javascript порт бібліотеки обробки Джоном Resig

• JS Graph It - коробки перетягування, з'єднані прямими лініями. Мінімальне автоматичне розташування ліній.

• Графф RaphaelJS - інтерактивний графічний приклад загальної багатоцільової бібліотеки векторних малюнків. RaphaelJS не може автоматично розміщувати вузли; для цього вам знадобиться інша бібліотека.

• JointJS Core - ліцензована MPL бібліотека відкритого джерела, що має ліцензії на MPL. Він може бути використаний для створення або статичних діаграм, або повністю інтерактивних інструментів для діаграмування та побудови додатків. Працює в браузерах, що підтримують SVG. Алгоритми компонування не включені в основний пакет

• mxGraph Раніше комерційна бібліотека діаграм HTML 5, тепер доступна під Apache v2.0. mxGraph є базовою бібліотеки використовується в draw.io .

Комерційні бібліотеки

• Інтерактивна бібліотека малювання та компонування GoJS

• yFiles для бібліотеки малюнків та компонувань HTML- комерційних графіків

• Набір інструментів візуалізації мережі KeyLines Commercial JS

• ZoomCharts Комерційна багатоцільова бібліотека візуалізації

• Syncfusion JavaScript Diagram Комерційна бібліотека діаграм для малювання та візуалізації.

Занедбані бібліотеки

• Переглядач мережевої мережі JS Cytoscape Web (ніяких нових функцій не планується; замість Cytoscape.js)

• Canviz JS візуалізації графів GraphViz. Закинута у вересні 2013 року.

• arbor.js Витончений графік з приємною фізикою та цукерками для очей. Покинутий у травні 2012 року. Існує декілька напівпідтримуваних вил.

• jssvggraph "Найпростіший можливий алгоритм компонування графіків, керований силою, реалізований як бібліотека Javascript, що використовує SVG-об'єкти". Занедбаний у 2012 році.

• jsdot Клієнтська програма для малювання графіка на стороні. Занедбаний у 2011 році .

• Протовісний графічний інструментарій для візуалізації (JavaScript). Замінено d3.

• Moo Wheel Interactive JS представлення для зв'язків та відносин (2008)

• Сценарій візуалізації графіка JSViz 2007 року

• dagre Макет графіка для JavaScript

Бібліотеки без JavaScript

• Graphviz Витончена мова візуалізації графіків

  • Graphviz був складений до Javascript за допомогою Emscripten тут із інтерактивною демонстрацією тут

• Спалах Красивий та потужний графічний графік на основі Flash

• Візуалізація графіків NodeBox Python

Відмова: Я розробник Cytoscape.js

Cytoscape.js - це бібліотека візуалізації графіків HTML5. API складний і відповідає конвенціям jQuery, в тому числі

• селектори для запитів і фільтрування ( cy.elements("node[weight >= 50].someClass")робить так, як ви очікували),
• ланцюг (наприклад cy.nodes().unselect().trigger("mycustomevent")),
• jQuery-функції для прив’язки до подій,
• елементи як колекції (наприклад, у jQuery є колекції HTMLDomElements),
• розширюваність (можна додати спеціальні макети, інтерфейс користувача, основні функції та функції колекції тощо),
• і більше.

Якщо ви думаєте про створення серйозної веб-сторінки з графіками, вам слід хоча б розглянути Cytoscape.js. Це безкоштовно та з відкритим кодом:

http://js.cytoscape.org

JsVIS був досить приємний, але повільний з більшими графіками, і його покинули з 2007 року.

prefuse - це набір програмних засобів для створення багатофункціональних візуалізацій даних на Java. flare - це бібліотека ActionScript для створення візуалізацій, які працюють у програвачі Adobe Flash Player, покинутому з 2012 року.

У комерційному сценарії серйозним конкурентом напевно є yFiles для HTML :

Він пропонує:

• Легкий імпорт користувацьких даних ( ця інтерактивна онлайн-демонстрація, як видається, робить саме те, що шукала ОП)
• Інтерактивне редагування для створення та керування діаграмами за допомогою жестів користувача (див. Повний редактор )
• Величезний API програмування для налаштування кожного аспекту бібліотеки
• Підтримка групування та гніздування (як інтерактивна, так і через алгоритми компонування)
• Не залежить від специфічного набору інструментів інтерфейсу, але підтримує інтеграцію майже в будь-який існуючий інструментарій Javascript (див. Демо- версію "інтеграції" )
• Автоматичне планування (різні стилі, такі як "ієрархічний", "органічний", "ортогональний", "дерево", "круговий", "радіальний" тощо)
• Автоматична складна крайова маршрутизація (ортогональна та органічна крайова маршрутизація з уникненням перешкод)
• Поступовий та частковий макет (додавання та видалення елементів і лише незначне або зовсім не змінення решти діаграми)
• Підтримка групування та введення (як інтерактивна, так і через алгоритми компонування)
• Впровадження алгоритмів графічного аналізу (шляхи, централі, мережеві потоки тощо)
• Використовує технології HTML 5, такі як SVG + CSS та Canvas, та сучасні властивості використання Javascript та інші інші функції ES5 та ES6 (але з тієї ж причини не працюватимуть у версіях IE 8 та новіших версій).
• Використовується модульний API, який можна завантажувати на вимогу за допомогою завантажувачів UMD

Ось зразок візуалізації, який показує більшість запитуваних функцій:

Повне розкриття інформації: я працюю в yWorks, але в Stackoverflow я не представляю свого роботодавця.

Як guruz згадувалося, JIT має кілька чудових макетів графіків / дерев, включаючи досить привабливі візуалізації RGraph та HyperTree.

Крім того, я щойно створив надпросту реалізацію на основі SVG в github (без залежностей, ~ 125 LOC), яка повинна працювати досить добре для невеликих графіків, що відображаються в сучасних браузерах.