title: How to show the text of D3 node on hover?
body: <p>I am very new to D3 and I am trying to replicate the behavior for text like is done with the circle elements here with the mouseover,mouseout behavior. Basically, to show text when hovered and hidden when not. Do I need to create a node var as I have with circle and text or is it possible with the current implementation:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var nodes = {};
  
  // Compute the distinct nodes from the links.
  links.forEach(function(link) {
    link.source = nodes[link.source] || (nodes[link.source] = {name: link.source, value: link.type});
    link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, value: link.type});
  });
  
  var width = 1000,
      height = 900;
  
  var force = d3.layout.force()
      .nodes(d3.values(nodes))
      .links(links)
      .size([width, height])
      .linkDistance(90)
      .charge(-125)
      .on("tick", tick)
      .start();
  
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
  
  // Per-type markers, as they don't inherit styles.
  svg.append("defs").selectAll("marker")
      .data(["suit", "licensing", "resolved"])
    .enter().append("marker")
      .attr("id", function(d) { return d; })
      .attr("viewBox", "0 -5 10 10")
      .attr("refX", 15)
      .attr("refY", -1.5)
      .attr("markerWidth", 6)
      .attr("markerHeight", 6)
      .attr("orient", "auto")
    .append("path")
      .attr("d", "M0,-5L10,0L0,5");
  
  var path = svg.append("g").selectAll("path")
      .data(force.links())
    .enter().append("path")
      .attr("class", function(d) { return "link " + d.type; })
      .attr("marker-end", function(d) { return "url(#" + d.type + ")"; })
      .style("stroke", function(d){ 
  
        if (d.type &gt;= 0.4) {
          return '#000066'
        }
  
        if (d.type &gt;= 0.25) {
          return '#ccccff'
        }
  
        if (d.type &gt;= 0.01) {
          return 'e8f4f8'
        }
        else {
          return '#FFFFFF'
        }
      });  
  
  var circle = svg.append("g").selectAll("circle")
      .data(force.nodes())
    .enter().append("circle")
      .attr("r", 6)
      .on("dblclick", dblclick)
      .on('mouseover', function(d){
      var nodeSelection = d3.select(this).style({opacity:'0.5'});
      nodeSelection.select("text").style({opacity:'1.0'});
  })
      .on('mouseout', function(d){
      var nodeSelection = d3.select(this).style({opacity:'0.0'});
      nodeSelection.select("text").style({opacity:'0.0'});
  })
      .call(force.drag);
  
  var text = svg.append("g").selectAll("text")
      .data(force.nodes())
    .enter().append("text")
      .attr("x", 8)
      .attr("y", ".31em")
      .text(function(d){ 
        if (d.value &gt;= 0.35){
          return d.name
      }
    });
  
  // Use elliptical arc path segments to doubly-encode directionality.
  function tick() {
    path.attr("d", linkArc);
    circle.attr("transform", transform);
    text.attr("transform", transform);
  }
  
  function linkArc(d) {
    var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx * dx + dy * dy);
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
  }
  
  
  function transform(d) {
    return "translate(" + d.x + "," + d.y + ")";
  }
  
  var drag = force.drag()
      .on("dragstart", dragstart);
  
  function dblclick(d) {
    d3.select(this).classed("fixed", d.fixed = false);
  }
  
  function dragstart(d) {
    d3.select(this).classed("fixed", d.fixed = true);
  }</code></pre>
  </div>
  </div>
  </p>