Я новичок в D3 и пытался сделать простой интерактивный линейный график. Мой текущий код:http://jsfiddle.net/9xske0m1/ основан на одном из найденных на bl.ocks.org

Я думал о добавлении вертикальной линии, как здесь:http://bl.ocks.org/benjchristensen/2657838 но со значениями линий, отображаемыми в виде условных обозначений при наведении курсора, в отличие от отображения их в нижней части графика, и меня, когда я наведите курсор на линию. Так что мне было интересно, как бы я поступил так. Я предполагаю, что я должен добавить кое-что здесь:

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