Arbor js - 将鼠标移到节点上时将节点 ID 显示为文本答案

【问题标题】：Arbor js - Show the node ID as text when you move the mouse over a nodeArbor js - 将鼠标移到节点上时将节点 ID 显示为文本
【发布时间】：2013-11-05 14:41:48
【问题描述】：

我对 Javascript 和 Arbor 还很陌生，并且在绘制完整的节点图时遇到了一些困难。我想以显示我的代码开始我的问题：

 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
            },  
    }

我在画布上创建了一个节点。我的问题是：例如，当我将鼠标移到节点上时，如何以文本形式显示节点 ID 或任何信息？我只想在将鼠标移到该节点上时才显示文本。您的帮助将不胜感激。

【问题讨论】：

这不是一个正确的答案，但我建议您查看stackoverflow.com/questions/9489271/arbor-js-node-onclick 顺便说一句，我刚开始使用 arbor.js 的项目，所以 Java Script 和相同的，没有太多经验它。如果您有兴趣，我们可以互相帮助
我一点也不介意。但是，我一直在考虑使用 d3 Javascript 库。请看一下：http://d3js.org/ 并告诉我。
我会查看 sigma.js。我还没有完全决定我将使用哪个库。感谢您的帮助。
欢迎您，顺便说一句，我认为解决您的问题很“容易”。如果成功，我会尝试并发布答案
@diegoaguilar ：你得到答案了吗？-使用 arbor.js 将鼠标指向节点时显示悬停文本

标签： javascript jquery canvas arbor.js

【解决方案1】：

也许你可以添加一个mousemove监听器，然后你可以在你的回调函数中测试鼠标是否在一个节点上。

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

希望对你有帮助！

【讨论】：