Como passar o mouse para o Line Graph Interactive no D3

Eu sou novo no D3 e estava tentando criar um gráfico de linha interativo simples. Meu código atual:http://jsfiddle.net/9xske0m1/ é baseado em um encontrado em bl.ocks.org

Eu estava pensando em adicionar uma linha vertical como a aqui:http://bl.ocks.org/benjchristensen/2657838 mas com os valores das linhas exibidas como uma legenda ao passar o mouse, em vez de exibi-los na parte inferior do gráfico, e eu quando passar o mouse sobre uma linha. Então, eu queria saber como eu faria isso. Eu estou supondo que eu tenha adicionado algo aqui:

    data = data.map( function (d) { 
    return { 
      CAUSES: d.CAUSES,
      YEAR: parseDate(d.YEAR.toString()),
      VALUE: +d.VALUE }; 
});   


// then we need to nest the data on CAUSES since we want to only draw one
// line per CAUSES
  data = d3.nest().key(function(d) { return d.CAUSES; }).entries(data);


  x.domain([d3.min(data, function(d) { return d3.min(d.values, function (d) { return d.YEAR; }); }),
             d3.max(data, function(d) { return d3.max(d.values, function (d) { return d.YEAR; }); })]);
  y.domain([0, d3.max(data, function(d) { return d3.max(d.values, function (d) { return d.VALUE; }); })]);

  // var path1 = svg.append("g").append("path").data([data1]).attr("class", "line1");


  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

  var causation = svg.selectAll(".CAUSES")
      .data(data, function(d) { return d.key; })
    .enter().append("g")
      .attr("class", "CAUSES");

  causation.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return color(d.key); });

questionAnswers(1)

yourAnswerToTheQuestion