I have a program that generates family tree dynamically from an array by using d3.js. I would like to display their information when I hover each node. For example: hovering the grandfather node and will display his name and address. How would I do this?
I've tried this one but when I hover one node, information of the other nodes will also be displayed.
$(document).ready(function(){
var $str = $(this).find("text");
$(".node").hover(function(){
$str.css("visibility", "visible");
}, function(){
$str.css("visibility", "hidden");
});
});
Please help. Thank you!
If you are trying to attach an event handler to dynamically created content, you may be running into an issue where jquery tries to attach a handler to an element that doesn't exist yet. I'm not super familiar with D3 but I know it has a lot of functionality, and probably can do this for you.
However, another solution that may help is to delegate the hover effect off of a containing element (such as a wrapper div or the body). Something like below:
$('body').on('mouseenter mouseleave', '.node', function(event) {
if (event.type === 'mouseenter') {
$str.show();
}
if (event.type === 'mouseleave') {
$str.hide()
}
});