D3.js折线折线图工具提示

Question

我想将工具提示添加到this折线图。 我指的是this和this示例

问题是，它们在SVG上没有唯一的点，它只有路径标记。

svg.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.close); })  
    .on("mouseover", function(d) {  
     div.transition()   
      .duration(200)  
      .style("opacity", .9);  
     div .html(formatTime(d.date) + "<br/>" + d.close) 
      .style("left", (d3.event.pageX) + "px")  
      .style("top", (d3.event.pageY - 28) + "px");  
     })     
    .on("mouseout", function(d) {  
     div.transition()   
      .duration(500)  
      .style("opacity", 0); 
    }); 

像上面的代码选择SVG上的点，但我没有任何特定的元素来绑定工具提示。

任何人都可以帮助我，因为我是新的d3.js。

Answer 1

你应该采取d.value为Y：

.attr("cy", function(d) { return y(d.value); }) 

，现在鼠标悬停上添加新的元素：

.on("mouseover", function(d) {  
     svg.append("text") 
      .text(d.value) 
      .attr('class', 'tooltip').style("font-size","10px") 
      .attr("x", x(d.date)) 
      .attr("y", y(d.value)) 
      .attr('fill', 'red'); 
     })     
    .on("mouseout", function(d) {  
     d3.selectAll('.tooltip').remove(); 
    });