Javascript 在响应d3.js图表中添加工具提示

我正在学习使用javascript和d3.js。我用工具提示制作了一个简单的折线图，效果非常好（请参阅）。 我决定让它具有响应性，因此使用一个模板创建一个新的模板（请参阅）。 响应正常，但我无法添加工具提示div。 有什么帮助吗

下面是一段有问题的代码：

    chart2.selectAll("dot")    
    .data(data)         
    .enter().append("rect")             
    .attr("width", 1)
    .attr("height", 120)      
    .style("opacity", 0)      // set the element opacity
    .style("stroke", "#6f6f6f")    // set the line colour
    .attr("xScale", function(d) { return xScale(d.date); })       
    .attr("yScale", function(d) { return yScale(d.close)-60; })   
    .on("mouseover", function(d)
     { 
     d3.select(this).attr("width", 1).style("opacity", .8)   ; //il punto cambia al mousover (bellissmo)

         div.transition()        
            .duration(70)      
            .style("opacity", .8)
            .style("border", "1px");      
        div .html(formatTime(d.date) + "<br/>"  + d.close)  
            .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY - 64) + "px");    
        })               
    .on("mouseout", function(d) {       

       d3.select(this).attr("r", 5.1).style("opacity", .0);   
        div.transition()        
        .duration(200)      
        .style("opacity", 0);   
    });

在css中：

 div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 95px;                  
  height: 40px;                 
  padding: 2px;             
  font: 15px arial;
  font-weight: bold;
  color: black;        
 background: #f0f0f0;
  pointer-events: none;         
}

---

定义div如下，并选择“body”并将div追加到那里

var div = d3.select('body').append("div")
      .attr("id", "chart")
      .attr("class", "tooltip")
      .style("opacity", 0);

---

什么是

div

？定义在哪里？在这里定义var div=d3。选择（“图表2”）。追加（“div”）。属性（“类”，“工具提示”）。样式（“不透明度”，0）；（我也编辑了这个问题，ti澄清）您正在向SVG添加

div

元素。这行不通——SVG中没有

div

元素。要么将其附加到HTML中，要么使用

文本

元素或类似的东西。

var div = d3.select('body').append("div")
      .attr("id", "chart")
      .attr("class", "tooltip")
      .style("opacity", 0);