如何添加D3工具提示

Question

目前我正在尋找D3示例試圖改變它來添加工具提示https://plnkr.co/edit/stHnntCknDUs0Xw6MlQ2?p=preview，但不能自己管理它。

我想提示和指針添加到此的方式就像是在這裏完成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); 
     }); 

只是不能得到它的工作

Answer 1

你把懸停錯誤的元素。您正在將它們放在點上（因爲您沒有date屬性，所以不會像在數據中那樣存在）。

我所做的就是把他們的道路上，像這樣：

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

但我仍然得到錯誤formatTime沒有定義。但是這個問題在獲取工具提示時被解決。所以，解決剩下的應該不難:)

更新plunkr：https://plnkr.co/edit/zQY0Wen1plIMuwOMq3PE?p=preview