bring node name on edge mouseover for arborjs

232 Views Asked by At

I am thinking of making a mouseover detect on edges for arbor.js data chart. I can detect the mouse on the edges by employing canvas getImageData technique

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

and then calling this:

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

This surely detects the edges on mouseover, but i can't get to get the id or name of each edge on the tooltip. This works by detecting the color pixel of the edges which I have kept same for all the edges. Any idea on how to call the particular edge name or id when mouseover is detected.

0

There are 0 best solutions below