GraphVis: более совершенный инструмент для визуализации графиков

GraphVis — это более совершенный движок для визуализации графиков, который позволяет настраивать визуализацию приложений и поддерживает разработку в индивидуальном режиме. В нём реализованы различные алгоритмы компоновки графиков, алгоритмы обнаружения сообществ и алгоритмы анализа путей. Это помогает разработчикам быстро создавать собственные приложения для анализа визуализации графиков.

Домашняя страница: www.graphvis.cn

Документация по разработке:

• Руководство по версии GraphVis V1: https://www.yuque.com/graphvis/ezsgc0.
• Онлайн-редактор примеров для версии V1: http://www.graphvis.cn/graphvis/graphvis-online-editor/index.html. Код примера можно скопировать и запустить локально.
• Документация по авторизованной версии GraphVis V2: http://www.graphvis.cn/graphvis/doc/. (Примечание: содержит полную документацию по разработке и примеры шаблонов приложений, которые можно использовать для быстрого создания продуктов визуализации графов.)
• Примеры онлайн-разработки для версии V2: http://www.graphvis.cn/graphvis/online-cases/index.html предоставляют более богатые функции и типы диаграмм, а также настраиваемую визуализацию графов. После получения компонентов авторизации предоставляются соответствующие исходные коды.
• Дополнительные примеры визуализации: http://www.graphvis.cn/graphvis/sitetemplate/index.html.

Тестирование производительности визуализации больших данных: http://www.graphvis.cn/graphvis/bigdata-vis/index.html.

Если проект вам помог, пожалуйста, поставьте звёздочку. Я буду продолжать работать над улучшением и обновлением...

Для индивидуальных требований к настройке, пожалуйста, свяжитесь с автором.

Основные преимущества проекта:

1. Быстрый и эффективный движок визуализации, поддерживающий интерактивную работу с большими объёмами данных.
2. Интеграция множества классических алгоритмов компоновки, таких как древовидные структуры, направленные силы, круговые структуры, иерархические отношения, предотвращение наложения узлов и т. д.
3. Поддержка классических алгоритмов обнаружения сообществ, таких как Chinese Whisper, Lovin и Newman.
4. Полные примеры онлайн-приложений и полная документация по разработке.

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

Быстрое использование:

Способ ссылки на интерфейс:

• Прямая ссылка на страницу:

  <script type="text/javascript" src="../visgraph-x.x.x.min.js"></script>

• Асинхронная загрузка с помощью requirejs:

  require(['visgraph','layoutFactory','clusterFactory'],function(VisGraph,layoutFactory,clusterFactory) {//do something});

Три шага для реализации визуализации данных графа с использованием GraphVis:

1. Организация данных на сервере в соответствии со структурой:

   var data = {
      nodes:[{id:'1',label:'刘备',type:'男',properties:{age:50}},
        {id:'2',label:'关羽',type:'男'},
        {id:'3',label:'张飞',type:'男'}],
   links:[{source:'1',target:'2',label:'二弟',properties:{other:'other prop'}},
        {source:'1',target:'3',label:'三弟'}]

}; ```

2. Добавление слоя графика на странице:

   <div id="graph-panel" style="width:800px;height:600px;"></div>

3. Инициализация графа отношений:

   let visGraph = new VisGraph(document.getElementById('graph-panel'));
   visGraph.drawData(data);//завершение рисования графика

Поддерживает индивидуальную настройку для удовлетворения конкретных потребностей и взаимодействия:

let visGraph = new VisGraph(document.getElementById(visDomId), {
    node: { //настройки узла по умолчанию
        label: { //настройка метки
            show: true, //отображать ли
            color: '50,50,50', //цвет шрифта
            font: 'bold 13px 微软雅黑', //размер и тип шрифта
            wrapText: false, //перенос текста узла
            textPosition: 'Middle_Center', //позиция текста Top_Center,Bottom_Center,Middle_Right
            //textOffsetX:-24,//горизонтальный сдвиг текста
            //textOffsetY:-24,//вертикальный сдвиг текста
            //backgroud:'255,255,255',//фон текста
            //borderWidth:0,//ширина рамки
            //borderColor:'250,250,250'//цвет рамки
        },
        shape: 'circle', //форма узла circle,rect,square,ellipse,triangle,star,polygon,text
        //image:'images/T1030001.svg',//изображение узла (установить узел в виде значка круга)
        color: '20,20,200', //цвет узла
        borderColor: '255,255,255', //цвет границы
        borderWidth: 2, //ширина границы
        borderRadius: 0, //радиус границы
        lineDash: [0], //интервал пунктирной линии границы, действует при borderWidth>0
        alpha: 1, //прозрачность узла
        size: 60, //размер узла по умолчанию
        width: 80, //длина узла (действует при shape=rect)
        height: 40, //высота узла (действует при shape=rect)
        selected: { //стиль при выборе
            borderColor: '50,120,230', //цвет рамки при выборе
            borderAlpha: 1, //прозрачность рамки при выборе
            borderWidth: 8, //ширина рамки при выборе
            showShadow: false, //показывать ли тень
            shadowColor: '50,100,250' //цвет тени при выборе
        },
        onClick: function(event, node) { //событие клика узла
            console.log('кликнул узел----[' + node.id + ':' + node.label + ']');
        },
        ondblClick: function(event, node) {
            console.log('двойной клик узла');
        }, //событие двойного клика узла
        onMouseDown: function(event, node) {
            console.log('мышь нажата на узле');
        }, //событие нажатия мыши на узле
        onMouseUp: function(event, node) {
            console.log('отпущена мышь на узле');
        }, //событие отпускания мыши на узле
        onMouseOver: function(event, node) {
            console.log('мышь наведена на узел');
        }, //событие наведения мыши на узел
        onMouseOut: function(event, node) {
            console.log('мышь убрана с узла');
        }, //событие убирания мыши с узла
        onMousedrag: function(event, node) {
            console.log('перетаскивание узла');
        } //событие перетаскивания узла
    },
    link: { //настройки связи по умолчанию

...