Визуализация графов с помощью библиотеки arbor.js

Некое время назад, мне потребовалось визуализировать графы и хотелось найти уже готовое решение что бы не изобретать очередной велосипед. Мне в руки попалась библиотека arbor, которая используя jQuery предоставлет возможность отрисовывать вполне приемлемые графы в браузере.



Саму библиотеку, а так же документацию и примеры (всё на английском) можно скачать на официальном сайте
И так по порядку.
В качестве холста используется html5 canvas, а это значит что в браузерах его не поддерживающих ничего работать не будет.
Создадим простую страницу которая подгружает JSON данные о вершинах и рёбрах с помощью AJAX. За основу возьмём идущий в комплекте пример и модернизируем его (загрузка данных, отображение).

Создадим файл с данными, где перечислим все вершины и рёбра
data.json:

{
"nodes": [
{"name": "node_1"},
{"name": "node_2"},
{"name": "node_3"},
{"name": "node_4"},
{"name": "node_5"},
{"name": "node_6"},
{"name": "node_7"},
{"name": "node_8"},
{"name": "node_9"},
{"name": "node_10"}
],
"edges": [
{"src": "node_3", "dest": "node_2"},
{"src": "node_5", "dest": "node_3"},
{"src": "node_8", "dest": "node_7"},
{"src": "node_1", "dest": "node_4"},
{"src": "node_7", "dest": "node_5"},
{"src": "node_3", "dest": "node_9"},
{"src": "node_2", "dest": "node_4"},
{"src": "node_6", "dest": "node_5"},
{"src": "node_9", "dest": "node_1"},
{"src": "node_10", "dest": "node_2"},
{"src": "node_1", "dest": "node_10"}
]
}

В основном файле подключим необходимые библиотеки, а так же вынесем во внешний файл все js скрипты

<script src="js/jquery.min.js"></script>
<script src="js/arbor.js"></script>  
<script src="main.js"></script>

В теле документа создаём canvas в котором будем рисовать

<canvas id="viewport" width="800" height="600"></canvas>

Теперь по порядку как это всё будет работать.
При полной загрузке создаётся объект с настройками для arbor, который так же содержит функции которые будут выполнятся при наступлении различных событий, функции отрисовки каждой вершины и грани (этим мне и понравилась библиотека, что позволяет настроить практически всё).
Далее этот объект передаём в конструктор arbor, который и запустит всю эту карусель.
Загрузка данных также осуществляется сразу после того как страница будет полностью загружена.

Вообще кода здесь больше чем слов, поэтому я считаю будет яснее и понятнее перейти сразу к нему с подробными комментариями.
main.js:

(function($){
 var Renderer = function(canvas)
 {
  var canvas = $(canvas).get(0);
  var ctx = canvas.getContext("2d");
  var particleSystem;

  var that = {
   init:function(system){
    //начальная инициализация
    particleSystem = system;
    particleSystem.screenSize(canvas.width, canvas.height); 
    particleSystem.screenPadding(80);
    that.initMouseHandling();
   },
      
   redraw:function(){
    //действия при перересовке
    ctx.fillStyle = "white"; //белым цветом
    ctx.fillRect(0,0, canvas.width, canvas.height); //закрашиваем всю область
   
    particleSystem.eachEdge( //отрисуем каждую грань
     function(edge, pt1, pt2){ //будем работать с гранями и точками её начала и конца
      ctx.strokeStyle = "rgba(0,0,0, .333)"; //грани будут чёрным цветом с некой прозрачностью
      ctx.lineWidth = 1; //толщиной в один пиксель
      ctx.beginPath();  //начинаем рисовать
      ctx.moveTo(pt1.x, pt1.y); //от точки один
      ctx.lineTo(pt2.x, pt2.y); //до точки два
      ctx.stroke();
    });
 
    particleSystem.eachNode( //теперь каждую вершину
     function(node, pt){  //получаем вершину и точку где она
      var w = 10;   //ширина квадрата
      ctx.fillStyle = "orange"; //с его цветом понятно
      ctx.fillRect(pt.x-w/2, pt.y-w/2, w,w); //рисуем
      ctx.fillStyle = "black"; //цвет для шрифта
      ctx.font = 'italic 13px sans-serif'; //шрифт
      ctx.fillText (node.name, pt.x+8, pt.y+8); //пишем имя у каждой точки
    });       
   },
  
   initMouseHandling:function(){ //события с мышью
    var dragged = null;   //вершина которую перемещают
    var handler = {
     clicked:function(e){ //нажали
      var pos = $(canvas).offset(); //получаем позицию canvas
      _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top); //и позицию нажатия кнопки относительно canvas
      dragged = particleSystem.nearest(_mouseP); //определяем ближайшую вершину к нажатию
      if (dragged && dragged.node !== null){
       dragged.node.fixed = true; //фиксируем её
      }
      $(canvas).bind('mousemove', handler.dragged); //слушаем события перемещения мыши
      $(window).bind('mouseup', handler.dropped);  //и отпускания кнопки
      return false;
     },
     dragged:function(e){ //перетаскиваем вершину
      var pos = $(canvas).offset();
      var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top);
 
      if (dragged && dragged.node !== null){
       var p = particleSystem.fromScreen(s);
       dragged.node.p = p; //тянем вершину за нажатой мышью
      }
 
      return false;
     },
     dropped:function(e){ //отпустили
      if (dragged===null || dragged.node===undefined) return; //если не перемещали, то уходим
      if (dragged.node !== null) dragged.node.fixed = false; //если перемещали - отпускаем
      dragged = null; //очищаем
      $(canvas).unbind('mousemove', handler.dragged); //перестаём слушать события
      $(window).unbind('mouseup', handler.dropped);
      _mouseP = null;
      return false;
     }
    }
    // слушаем события нажатия мыши
    $(canvas).mousedown(handler.clicked);
   },
      
  }
  return that;
 }    

 $(document).ready(function(){
  sys = arbor.ParticleSystem(1000); // создаём систему
  sys.parameters({gravity:true}); // гравитация вкл
  sys.renderer = Renderer("#viewport") //начинаем рисовать в выбраной области

  $.getJSON("data.json", //получаем с сервера файл с данными
   function(data){
    $.each(data.nodes, function(i,node){
     sys.addNode(node.name); //добавляем вершину
    });
    
    $.each(data.edges, function(i,edge){
     sys.addEdge(sys.getNode(edge.src),sys.getNode(edge.dest)); //добавляем грань
    });
  });
    
 })

})(this.jQuery)

Сама библиотека мне понравилась тем что позволяет самому отрисовывать как будут выглядеть вершины и грани, а так же настроить действия на любые события.
Исходник получившегося можно скачать тут