Arbor Js - Node Onclick?

Question

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

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

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

Мой текущий узел и ребралистинг в следующем формате:

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 для создания графика обсуждений и ответов на моем форуме.У меня все работает так, что идентификаторы отображаются «на орбите» вокруг соответствующего начала потока.

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

Answer 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;
        });

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

Я бы добавил URL-адрес ссылки на узел json, который вы передаете, чтобы определить каждый узел, чтобы исходный опубликованный 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 для запуска ссылки (текущий узел в методе mouse down «выбран», так что вы можете извлечь ссылку, как selected.node.data.link

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

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

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

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

Answer 2

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

Основываясь на этом вопросе , в котором обсуждается, как различать события перетаскивания и нажатия в 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;
 }

Answer 3

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

<input type=checkbox name=mycheckbox[]>

Answer 4

В скрипте 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
    },

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

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