Text label hides behind the circle node in d3.js

Question

function drawGraph(theGraph) {

  var width = 1500,
    height = 900;

  var color = d3.scale.category20();

  var force = d3.layout.force()
    .charge(-480)
    .linkDistance(120)
    .size([width, height]);

  var svg2 = d3.select("#canvas").append("svg")
    .attr("width", width)
    .attr("height", height)
    .style("top", "0").style("left", "0").style("position", "absolute");

  var svg = d3.select("#canvas").append("svg")
    .attr("width", width)
    .attr("height", height)
    .style("top", "0").style("left", "0").style("position", "absolute");

  force
    .links(theGraph.links)
    .nodes(theGraph.nodes)
    .start();

  node = svg.selectAll(".node")
    .data(theGraph.nodes).enter().append('g').classed('node', true);

  node.append("circle")
    .attr("class", "node")
    .attr("r", 10)
    .call(force.drag);

  increaseNodeSize(node, calculateNodeLinks(theGraph));
  link = svg2.selectAll(".link")
    .data(theGraph.links)
    .enter().append("line")
    .attr("class", "link");

  force.on("tick", function() {
    link.attr("x1", function(d) {
        return d.source.x;
      })
      .attr("y1", function(d) {
        return d.source.y;
      })
      .attr("x2", function(d) {
        return d.target.x;
      })
      .attr("y2", function(d) {
        return d.target.y;
      });

    node.attr("cx", function(d) {
        return d.x;
      })
      .attr("cy", function(d) {
        return d.y;
      });
    node.attr("transform", function(d) {
      return 'translate(' + [d.x, d.y] + ')';
    })
  });

  node.on("mouseover", function(d) { // When mouse over a node, the labels are being appended; however some of the labels hide behind the circle.
    d3.select(this).classed('hovered', true)
      .append("text").classed('label', true).classed('hover', true).text(function(d) {
        return d.name
      });

    seq.state("mouseovered", d.name);

    var neighborNodes = [];
    link.filter(function(l) {
      if (l.source === d) {
        if ($.inArray(l.target.name, neighborNodes) == -1) {
          neighborNodes.push(l.target.name);
          return true;
        }
      }
      if (l.target === d) {
        if ($.inArray(l.source.name, neighborNodes) == -1) {
          neighborNodes.push(l.source.name);
          return true;
        }
      }
      return false;
    }).classed('highlighted', true);

    node.filter(function(d) {
        return $.inArray(d.name, neighborNodes) > -1
      }).classed('highlighted', true)
      .append("text").classed('label', true).text(function(d) {
        return d.name
      });

  });

  node.on("mouseout", function(d) {
    seq.state("mouseovered", "");
    node.selectAll("text").remove();
    d3.select(this).classed('hover', false);
    link.classed("highlighted", false);
  });

}

The problem is when i mouse over the circle nodes, some of the text labels hide behind the circle. How can i resolve this ?. I have tried through the z index(css), but still it does not resolve the problem.