2

I am quite new to Javascript and Arbor and having some difficulties to draw a complete graph of nodes. I would like to start my question with showing my code: 

 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.newFunction)
            },
            newFunction: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
            },  
    }

I have created one node on the canvas. My question is: how can I show the node ID, for example, or any information as text as soon as I move the mouse over the node? I want to show the text ONLY when I move the mouse over that node. Your help would be very much appreciated.

Mod
  • 5,091
  • 7
  • 28
  • 47
  • This is not right an anwer but I suggest you looking at http://stackoverflow.com/questions/9489271/arbor-js-node-onclick By the way, I'm right starting with a project with arbor.js so Java Script and same, got not much experience on it. If you're interested we may help each other – diegoaguilar Nov 10 '13 at 19:30
  • I do not mind at all. However, I have been thinking to work on d3 Javascript library. Please take a look: `http://d3js.org/` and let me know. – Mod Nov 10 '13 at 20:23
  • I will look through sigma.js. I have not completely decided which library I will use. Thanks for your help. – Mod Nov 10 '13 at 22:36
  • Welcome, by the way, I think is "easy" to get your question problem done. I'll try out and post an answer if succeed – diegoaguilar Nov 10 '13 at 22:57
  • @diegoaguilar :did you get the answer?-Display the hover text while mouse point over a node using arbor.js – Ram Ki Dec 07 '16 at 09:56
  • @user2864315 :Currently I am working on the graph using mouse over tool tip!! Where will you add this code ??Is it in renderer.js ? – Ram Ki Dec 15 '16 at 07:08

1 Answers1

1

Maybe you can add a mousemove listener,then you can test whether mouse is over one node or not in your callback function.

    moved:function(e){
        var pos = $(canvas).offset();
        _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
        nearestNode = particleSystem.nearest(_mouseP);

        if (!nearestNode.node) return false

        boxTuple = nodeBoxes[nearestNode.node.name];

        //judge whether mouse is on the node or not
        if(isInRectangle(boxTuple,_mouseP))
        {
                            var id = nearestNode.node.name;
            alert("Node selected:" + id);
        }
        return false
      },

     //add a mousemove listener 
    $(canvas).mousemove(handler.moved);

Hope it helps!

shutear
  • 11
  • 2