在arborjs的边缘鼠标悬停上引入节点名称

时间:2014-04-24 20:42:00

标签: javascript jquery html5 html5-canvas arbor.js

我正在考虑在arbor.js数据图表的边缘进行鼠标悬停检测。我可以通过使用canvas getImageData技术检测边缘上的鼠标

function detectLine(x, y,content) {
    var imageData = ctx.getImageData(0, 0, w, h),
            inputData = imageData.data,
            pData = (~~x + (~~y * w)) * 4;
    if (inputData[pData]===16 && edg._id) {
        var z=sys.getEdges(ion,lbl);
        console.log(z)
        $('<div id="tooltip">' + content + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
        return true;
        }

    else{
        $("#tooltip").remove();
        return false;
    }
}

然后调用它:

canvas.addEventListener("mousemove", function(e){
    var x = parseInt(e.offsetX);
    var y = parseInt(e.offsetY);

        detectLine(x,y,nd._id);

        // console.log(edg.target.data.label);
});

这肯定会检测鼠标悬停时的边缘,但我无法获取工具提示上每条边的ID或名称。这是通过检测边缘的颜色像素来实现的,这些像素对于所有边缘都保持相同。有关如何在检测到鼠标悬停时调用特定边缘名称或ID的任何想法。

0 个答案:

没有答案