如何添加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