Soy nuevo en D3 y estaba tratando de hacer un gráfico de línea interactivo simple. Mi código actual:http://jsfiddle.net/9xske0m1/ se basa en uno encontrado en bl.ocks.org

Estaba pensando en agregar una línea vertical como la de aquí:http://bl.ocks.org/benjchristensen/2657838 pero con los valores de las líneas mostrados como una leyenda al pasar el cursor por encima, en lugar de mostrarlos en la parte inferior del gráfico, y yo al pasar el cursor sobre una línea. Entonces me preguntaba cómo iba a hacer eso. Supongo que tengo que agregar algo aquí:

    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); });