有没有人知道是否有可能在y轴标签上有鼠标悬停事件？例如,我在下面有一个散点图.y轴上的标签是"area1","area2"和"area3".当用户悬停标签"area1"时,将弹出工具提示以显示area1的描述.我以前没有看到过这样的例子.有人知道怎么做吗？非常感谢!
我这里也有一个傻瓜http://plnkr.co/edit/wLjanxFWIzpxP0cbq6kK?p=preview

    
      
        
        
    
  
    
Example
     

 
      
    

    
    
  

Cyril Cheria.. 5

为此首先创建一个工具提示div.

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

接下来在工具提示的CSS中添加样式

div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 28px;
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

对于y轴上的工具提示,选择所有刻度mouseover和mouseout听众

yaxis.selectAll(".tick")[0].forEach(function(d1) {
    var data = d3.select(d1).data();//get the data asociated with y axis
    d3.select(d1).on("mouseover", function(d) {
      //on mouse hover show the tooltip
            div.transition()        
                .duration(200)      
                .style("opacity", .9);      
            div .html(data) 
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px");    
            })                  
        .on("mouseout", function(d) {   
          //on mouse out hide the tooltip
            div.transition()        
                .duration(500)      
                .style("opacity", 0);   
        });

  })

在这里工作代码

希望这可以帮助!

为此首先创建一个工具提示div.

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

接下来在工具提示的CSS中添加样式

div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 28px;
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

对于y轴上的工具提示,选择所有刻度mouseover和mouseout听众

yaxis.selectAll(".tick")[0].forEach(function(d1) {
    var data = d3.select(d1).data();//get the data asociated with y axis
    d3.select(d1).on("mouseover", function(d) {
      //on mouse hover show the tooltip
            div.transition()        
                .duration(200)      
                .style("opacity", .9);      
            div .html(data) 
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px");    
            })                  
        .on("mouseout", function(d) {   
          //on mouse out hide the tooltip
            div.transition()        
                .duration(500)      
                .style("opacity", 0);   
        });

  })

在这里工作代码

希望这可以帮助!