d3js mulitline mouse over

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div ng-controller="MainCtrl" ng-app="app" class="fiddleChart">
    <line-chart data="lineData" id="chartId"></line-chart>
</div>

CSS

.fiddleChart{
    width:500px;
    height:200px;
}
line-chart .axis path,
line-chart .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
line-chart .axis line {
  stroke: #bdc3c7;
}
line-chart .x.axis path {
  display: none;
}
line-chart .line {
  fill: none;
  stroke: #3498db;
  stroke-width: 1.5px;
}
line-chart .y .tick:first-child line{
  stroke: #000;
}
line-chart .overlay {
  fill: none;
  pointer-events: all;
}

JavaScript

var myApp = angular.module('app', []);
myApp.directive("lineChart", function() {
  return {
    restrict: 'E',
    scope: {
      data: '=',
      id: '@'
    },
    link: function (scope, element, attrs) {
      scope.$watch( 'data', function ( data ) {
        d3.select("#"+attrs.id).select("svg").remove();
        if (data) {
          var margin = {top: 20, right: 20, bottom: 30, left: 40},
              width = element[ 0 ].parentElement.offsetWidth - margin.left - margin.right,
              height = element[ 0 ].parentElement.offsetHeight - margin.top - margin.bottom;
          var parseDate = d3.time.format("%d-%b-%y").parse;
          var x = d3.time.scale()
              .range([0, width]);
          var y = d3.scale.linear()
              .range([height, 0]);
          var xAxis = d3.svg.axis()
              .scale(x)
              .orient("bottom")
              .innerTickSize(-height)
              .ticks(4)
              .outerTickSize(0)
              .tickPadding(5)
              .tickFormat(function(d) { return d3.time.format('%d/%m %H:%M')(new Date(d)); });
          var yAxis = d3.svg.axis()
              .scale(y)
              .orient("left")
              .innerTickSize(-width)
              .outerTickSize(0)
              .tickPadding(10);
          var line = d3.svg.line()
              .x(function(d) { return x(d[0]); })
              .y(function(d) { return y(d[1]); });
          var svg = d3.select(element[0]).append("svg")
              .attr("width", '100%')
              .attr("height", '100%')
              .attr('viewBox','0 0 '+ element[ 0 ].parentElement.offsetWidth +' '+ element[ 0 ].parentElement.offsetHeight )
            .append("g")
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
          var minX = d3.min(data, function (item) { return d3.min(item.values, function (d) { return d[0]; }); });
          var maxX = d3.max(data, function (item) { return d3.max(item.values, function (d) {...