score:0

Accepted answer

i tried to give you some starting point by editing your script,.. please take a look

     // note : please add position:relative to #mdview html element.
     var tooltip = d3.select("#mdview") // changed the selector
        .append("div")
        .style("position", "absolute")
        .style("z-index", "10")
        .style("padding", "10px")
        .style("background-color", "#333")
        .style("border-radius", "5px")
        .style("color", "#fff") 
        .style("opacity", "0");

      var node = svg.selectall(".node")
            .data(graph.nodes)
            .enter().append("g")
            .attr("class", "node")
            .call(force.drag)
             /* added these two events */
            .on('mousemove',function(d,i){
                 console.log(d);
                tooltip
                .style('top',d.y+'px')
                .style('left',d.x+'px')
                .style('opacity',1)
                .html('size : '+d.size);
          }).on('mouseleave',function(){
              tooltip 
                .style('opacity',0)
                .html('');
          });

please keep in mind this is just a starter point for you , if you need more help please just ask.

hope it helps.


Related Query

More Query from same tag