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