Infovis force directed graph, popup window on node

Question

Hi if theres any infovis users out there they may be able to help, im a infovis noob just got my force directed graph up and running passing in my nodes through Json, is there anyway I can amend a popup info window to each node as one might see on a Google map when a marker is clicked, i've been going around in circules for a few hours.

Thanks.

Here's my attempt to attach an image to each node still cant get this to work:

onCreateLabel: function(domElement, node) {
      var actionElem;
      var link = document.createElement('a');
      var frame = document.createElement('div');


      actionElem = document.createElement('img');
      // http://promote.opera.com/logos/Opera-icon-high-res.png
      //actionElem.src = photoUrls[node.id];
      actionElem.src = 'http://promote.opera.com/logos/Opera-icon-high-res.png';
      actionElem.className = 'profilePicture';

      //actionElem.onclick = function() { nodeOnClick(node) };
      link.href = '/' + node.id;
      link.className = 'link';
      link.target = '_blank';
      link.innerHTML = node.name;
      frame.className = 'detailFrame';
      frame.appendChild(actionElem);
      frame.appendChild(document.createElement('br'));
      frame.appendChild(link);
      domElement.appendChild(frame);
},  

Answer 1

You can add an image to a node by doing something like this:

onCreateLabel: function(label, node){
label.innerHTML = "<div><img src='/images/node.png'/></div>;
}

To add a unique image you can pass in an image name in json:

onCreateLabel: function(label, node){
label.innerHTML = "<div><img src='/images/"+node.data.image+"'/></div>;
}

Answer 2

IF you want the image to be in a pop-up which comes up when you hover the node then you can use "Tips". Add following code when you initialize your visualization( e.g.force directed ).

 Tips: {
          enable: true,
          onShow: function(tip, node) {

            tip.innerHTML = "<div class=\"tip-title\"> <img src = "your-image-url"  >" +   "</div>" ;

          }
        }