Wie man D3 Tooltips hinzufügt

Question

Momentan schaue ich in D3 Probe versuchen, es zu ändern, Tooltips https://plnkr.co/edit/stHnntCknDUs0Xw6MlQ2?p=preview hinzufügen, aber kann es nicht verwalten.

Ich möchte Tooltip und Zeiger auf diese die Art und Weise hinzuzufügen, wie es hier geschehen ist http://c3js.org/samples/timeseries.html

//Add tooltips 
    // Define the div for the tooltip 
     var div = d3.select("body").append("div") 
      .attr("class", "tooltip")    
      .style("opacity", 0); 

     // Add the scatterplot 
    countryEnter.selectAll("dot") 
     .data(data)   
    .enter().append("circle")        
     .attr("r", 5)  
     .attr("cx", function(d) { return x(d.date); })  
     .attr("cy", function(d) { return y(d.stat); })  
     .on("mouseover", function(d) {  
      div.transition()   
       .duration(200)  
       .style("opacity", .9);  
      div .html(formatTime(d.date) + "<br/>" + d.date) 
       .style("left", (d3.event.pageX) + "px")  
       .style("top", (d3.event.pageY - 28) + "px");  
      })     
     .on("mouseout", function(d) {  
      div.transition()   
       .duration(500)  
       .style("opacity", 0); 
     }); 

kippe gerade bekommen es auf dem falschen Element

Answer 1

Sie setzen die schweben zu arbeiten. Sie setzen sie auf die Punkte (die nicht wie in Ihren Daten vorhanden sind, da Sie kein Attribut date haben).

Was ich getan habe ist sie wie so auf dem Weg platzieren:

countryEnter.append("path") 
     .attr("class", "line") 
     .attr("d", function(d) { return line(d.values); }) 
     .style("stroke", function(d) { return color(d.name); }) 
     .on("mouseover", function(d) { 
      console.log(d) 
      divTooltip.transition()  
       .duration(200)  
       .style("opacity", .9) 
       .style("left", (d3.event.pageX) + "px")  
       .style("top", (d3.event.pageY - 28) + "px") 
      .innerHTML(formatTime(d.date) + "<br/>" + d.close) 

      })     
     .on("mouseout", function(d) {  
      divTooltip.transition()  
       .duration(500)  
       .style("opacity", 0); 
     }); 

Aber ich immer noch den Fehler formatTime nicht definiert ist. Das Problem ist jedoch gelöst, wenn der Tooltip angezeigt werden soll. So den Rest der Lösung sollte nicht schwierig sein :)

Aktualisiert plunkr: https://plnkr.co/edit/zQY0Wen1plIMuwOMq3PE?p=preview