D3 force directed graph. On mouse over show labels

This is related to this question.

Caveat! I am very much a rookie programmer… any help is massively appreciated!

  • D3.js zoom with nested svg breaks viewport in Internet Explorer
  • Redrawing SVG on resize
  • What does zoom.scaleExtent() do in d3.js?
  • Moving line timegraph with d3.js
  • d3.js apply rect collision in force layout
  • Data joins in d3; I must not be understanding selections and/or data key functions properly
  • I’m using http://mbostock.github.com/d3/ex/force.html to generate a force directed graph on some php generated json data. I have managed to get some code ( //Highlight selected node, its links, and its children in a D3 force directed graph ) whereby on mouse over everything fades except the node and the connecting nodes.
    This is my current code:

    http://jsfiddle.net/WNHaB/

    I would now like to add the titles to the node and each child node on mouse over at the same time as the fade. This would greatly increase the usability of the program. Any idea how to do that???

    Update

    So thanks to Nachtgold I got the labels on the nodes, changed the font color and size. The flickering that happened when the cursor coincidentally hit a text label was pretty annoying. I fixed this by using .style("pointer-events", 'none')
    The current edition is thus:

    http://jsfiddle.net/dfETs/

    I would still like to move the text relative to the nodes so they don’t overlap. Any ideas how to do this?

    Thanks a bunch!

  • A good book for learning D3.js
  • d3 create object without appending
  • How to make labels appear only when the chart is zoomed in
  • I'm getting JavaScript error “d.getMonth is not a function” when trying to format a date using d3.time.format
  • Append randomly selected polygon for given data points in D3 JS
  • angular.js and d3.js - geometric example