将文本提示添加到条形图d3

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试在鼠标悬停的条形图上为每个条形图添加文本工具提示。我是d3新手，所以添加文本时遇到问题。我试过的是我在网上找到的不同策略的组合，但我仍然没有得到一个提示。不知道我错过了什么，或者我错了什么地方。任何帮助表示赞赏。将文本提示添加到条形图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)); });

回答：

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");});

以上是 将文本提示添加到条形图d3 的全部内容， 来源链接： utcz.com/qa/266467.html

回到顶部