Добавление текстового кончика к гистограмме d3

Question

Я пытаюсь добавить текстовые подсказки к каждому из своих баров на моей гистограмме при наведении курсора мыши. Я новичок в d3, поэтому у меня возникают проблемы с добавлением текста. То, что я пробовал, представляет собой комбинацию различных стратегий, которые я нашел в Интернете, но я все еще не получаю подсказку. Не знаю, чего я пропущу, или где я ошибся. Любая помощь приветствуется.

Спасибо!

    bar.enter() 
         .append("g") 
         .attr("class", "bar-container") 
         .append("rect") 
         .attr("class", "bar") 
         .attr('fill','#4EC7BD') 
         .attr("x", function(d) { return x(d.id); }) 
         .attr("y", function(d) { return y(eval('d.'+scope.metric)); }) 
         .attr("height", function(d) { return height - y(eval('d.'+scope.metric)); }) 
         .attr("width", x.rangeBand()) 
         .on('click', function(d){ 
          scope.showDetails(d, eval('d.'+scope.metric)) 
         }) 

         // start tooltip 
         .on("mouseover", function(d){ 
          console.log("D",scope.metric); 

          var xPos = parseFloat(d3.select(this).attr("x")); 
          var yPos = parseFloat(d3.select(this).attr("y")); 
          var height = parseFloat(d3.select(this).attr("height")) 

          d3.select(this) 
           .append("text") 
           .attr("class", "d3tip") 
           .attr("x",xPos) 
           .attr("y",yPos +height/2) 
           .text("test"); 
          }) 
         .on("mouseout",function(){ 
          d3.select(".tooltip").remove(); 
         }); 
        // end tooltip 

        // removed data: 
        bar.exit().remove(); 
        // updated data: 
        bar 
         .transition() 
         .duration(750) 
         .attr("y", function(d) { return y(eval('d.'+scope.metric)); }) 
         .attr("height", function(d) { return height - y(eval('d.'+scope.metric)); }); 

Answer 1

This answer получил меня там, где я должен был быть.

Решение:

  var tooltip = d3.select("body") 
       .append("div") 
       .style("position", "absolute") 
       .style("z-index", "10") 
       .style("visibility", "hidden"); 

        bar.enter() 
         .append("g") 
         .attr("class", "bar-container") 
         .append("rect") 
         .attr("class", "bar") 
         .attr('fill','#4EC7BD') 
         .attr("x", function(d) { return x(d.id); }) 
         .attr("y", function(d) { return y(eval('d.'+scope.metric)); }) 
         .attr("height", function(d) { return height - y(eval('d.'+scope.metric)); }) 
         .attr("width", x.rangeBand()) 
         .on('click', function(d){ 
          scope.showDetails(d, eval('d.'+scope.metric)) 
         }) 
         // tooltip 
         .on("mouseover", function(d){ 
          tooltip.text(eval('d.'+scope.metric)); 
          return tooltip.style("visibility", "visible"); 
         }) 
         .on("mousemove", function(){return tooltip.style("top", 
          (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");}) 
         .on("mouseout", function(){return tooltip.style("visibility", "hidden");});