Ich bin neu in D3 und habe versucht, ein einfaches interaktives Liniendiagramm zu erstellen. Mein aktueller Code:http: //jsfiddle.net/9xske0m1 basiert auf einem auf bl.ocks.org gefundenen

Ich habe darüber nachgedacht, eine vertikale Linie wie die hier hinzuzufügen:http: //bl.ocks.org/benjchristensen/265783 aber mit den Werten der Zeilen, die als Legende im Hover angezeigt werden, im Gegensatz zu denen, die im unteren Bereich des Diagramms angezeigt werden, und I, wenn ich mit der Maus über eine Zeile fahre. Also habe ich mich gefragt, wie ich das machen soll. Ich gehe mal davon aus, dass ich hier noch einiges hinzufügen muss:

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