Arbor Js - Node Onclick?

Я использую arbor.js для создания графика.

Как создать событие onclick для node или сделать ссылку node где-нибудь после нажатия?

На домашней странице Arborjs.org есть узлы, которые ссылаются на внешние страницы при нажатии, как мне реплицировать это или сделать функцию javascript функции node при нажатии?

Мой текущий список node и краев находится в этом формате:

var data = {
    nodes:{
        threadstarter:{'color':'red','shape':'dot','label':'Animals'},
        reply1:{'color':'green','shape':'dot','label':'dog'},
        reply2:{'color':'blue','shape':'dot','label':'cat'}
    },
    edges:{
        threadstarter:{ reply1:{}, reply2:{} }
    }
};
sys.graft(data);

Немного контекста: Я использую arbor.js для создания графика потоков запуска и ответов на моем форуме. У меня это работает, так что идентификаторы отображаются "на орбите" вокруг своего стартера потока.

Ссылка на сайт беседки действительно не очень полезна. Любая помощь очень ценится.

ОТВЕТЫ

Ответ 1

Если вы посмотрите на демо-код атласа (в github), вы увидите внизу, есть выбор функций события мыши, если вы посмотрите на:

$(canvas).mousedown(function(e){
            var pos = $(this).offset();
            var p = {x:e.pageX-pos.left, y:e.pageY-pos.top}
            selected = nearest = dragged = particleSystem.nearest(p);

            if (selected.node !== null){
            // dragged.node.tempMass = 10000
                dragged.node.fixed = true;
            }
            return false;
        });

Это используется для управления функцией перетаскивания по умолчанию node. Здесь вы можете вызвать нужную ссылку.

Я бы добавил URL-адрес ссылки в node json, который вы возвращаете, чтобы определить каждый node, поэтому ваш оригинальный JSON-сообщение станет чем-то вроде:

nodes:{
threadstarter:{'color':'red','shape':'dot','label':'Animals'},
reply1:{'color':'green','shape':'dot','label':'dog', link:'http://stackoverflow.com'},
reply2:{'color':'blue','shape':'dot','label':'cat', link:'http://stackoverflow.com'}
},

Затем вы можете обновить метод mouseDown, чтобы вызвать ссылку (текущий node в методе мыши "выбран", чтобы вы могли вытащить ссылку, например selected.node.data.link

Если вы посмотрите на исходный источник для сайта беседки, чтобы увидеть, как они это сделали, у них есть функция щелчка, которая вызывается на событие mouseDown, а затем, по существу, делает:

 $(that).trigger({type:"navigate", path:selected.node.data.link})

(отредактирован для ваших целей)

Стоит отметить, что пока рамки и демонстрации Arbor открыты для использования, их сайт не является и на самом деле защищен авторским правом, поэтому только читайте, чтобы посмотреть, как они это сделали, не копируйте его;)

Ответ 2

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

Основываясь на этом question, в котором обсуждается, как отличить события перетаскивания и нажатия в JS, я написал следующее:

 initMouseHandling:function(){
    // no-nonsense drag and drop (thanks springy.js)
    selected = null;
    nearest = null;
    var dragged = null;
    var oldmass = 1
    var mouse_is_down = false;
    var mouse_is_moving = false


    // set up a handler object that will initially listen for mousedowns then
    // for moves and mouseups while dragging
    var handler = {
      mousemove:function(e){
        if(!mouse_is_down){
          var pos = $(canvas).offset();
          _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
          nearest = particleSystem.nearest(_mouseP);

          if (!nearest.node) return false
          selected = (nearest.distance < 50) ? nearest : null
          if(selected && selected.node.data.link){
            dom.addClass('linkable')
          } else {
            dom.removeClass('linkable')
          }
        }
        return false
      },
      clicked:function(e){
        var pos = $(canvas).offset();
        _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
        nearest = particleSystem.nearest(_mouseP);

        if (!nearest.node) return false
        selected = (nearest.distance < 50) ? nearest : null

        if (nearest && selected && nearest.node===selected.node){
          var link = selected.node.data.link
          if (link.match(/^#/)){
             $(that).trigger({type:"navigate", path:link.substr(1)})
          }else{
             window.open(link, "_blank")
          }
          return false
        }
      },
      mousedown:function(e){
        var pos = $(canvas).offset();
        _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
        selected = nearest = dragged = particleSystem.nearest(_mouseP);

        if (dragged.node !== null) dragged.node.fixed = true

        mouse_is_down = true
        mouse_is_moving = false

        $(canvas).bind('mousemove', handler.dragged)
        $(window).bind('mouseup', handler.dropped)

        return false
      },
      dragged:function(e){
        var old_nearest = nearest && nearest.node._id
        var pos = $(canvas).offset();
        var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)

        mouse_is_moving = true

        if (!nearest) return
        if (dragged !== null && 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.node.tempMass = 50
        dragged = null
        selected = null
        $(canvas).unbind('mousemove', handler.dragged)
        $(window).unbind('mouseup', handler.dropped)
        _mouseP = null

        if(mouse_is_moving){
          // console.log("was_dragged")
        } else {
          handler.clicked(e)
        }

        mouse_is_down = false

        return false
      }
    }
    $(canvas).mousedown(handler.mousedown);
    $(canvas).mousemove(handler.mousemove);

  }

}

Как вы можете видеть,

  • Я сделал разницу между функциями обработчика щелчков и mousedown.
  • Я открываю ссылки на новых вкладках. Чтобы просто перенаправить, измените: window.open(ссылка, "_blank" ) для
    window.location = ссылка.
  • Вышеупомянутая функция должна заменить вашу предыдущую функцию initMouseHandling в файле renderer.js.
  • Определите "dom" как: var dom = $(canvas)
  • Вы должны добавить следующий код css, чтобы дать отзыв пользователю.
 canvas.linkable{
   cursor: pointer;
 }

Ответ 3

В script renderer.js есть обработчик событий мыши, поэтому вы можете добавить свой код для создания своих функций.

Я изменил renderer.js, чтобы добавить функции щелчка и двойного щелчка.

var handler = {
    clicked:function(e){
        var pos = $(canvas).offset();
        _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
        selected = nearest = dragged = particleSystem.nearest(_mouseP);
        if (dragged.node !== null) dragged.node.fixed = true
        $(canvas).bind('mousemove', handler.dragged)
        $(window).bind('mouseup', handler.dropped)
        $(canvas).bind('mouseup', handler.mypersonalfunction)
    },
    mypersonalfunction:function(e){
        if (dragged===null || dragged.node===undefined) return
        if (dragged.node !== null){
            dragged.node.fixed = false                  
            var id=dragged.node.name;
            alert('Node selected: ' + id);
        }            
        return false
    },

Вы можете проверить функции клика и двойного щелчка на этой странице .

Я добавляю узлы и ребра, когда был нажат node, и я добавляю ребра к другим узлам при двойном щелчке node (blue, yellow и green)

Ответ 4

Я ищу аналогичную настройку для выбора по каждому значению id node. Как бы это было, если вместо триггера мыши-манипулятора выбор был сделан с помощью флажка внутри каждого node?

<input type=checkbox name=mycheckbox[]>