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.