d3.js javascript 中轴标签的鼠标悬停事件

有人知道是否可以在 y 轴标签上实现鼠标悬停事件吗？例如，我有一个如下的散点图。y 轴上的标签是“area1”、“area2”和“area3”。当用户将鼠标悬停在“area1”标签上时，会弹出一个工具提示显示 area1 的描述。我之前没有见过类似的示例。有人知道怎么做吗？非常感谢！
我这里还有一个 plunker 示例：http://plnkr.co/edit/wLjanxFWIzpxP0cbq6kK?p=preview

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Plot</title>
    <style> 
     .axis path,
     .axis line{
        fill: none;
        stroke: #000;
        shape-rendering: crishpEdges;
        }    
    </style>
  </head>
    <h1 style = "text-align:center;">Example</h1>     

 <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>  
    <div id="chart">
    </div>
    <script>

     var data = [
       {x: 5, y: "area1"
        },
       {x: 34, y: "area2"
        },
       {x: 19, y: "area3"
        }
       ];

 data.forEach(function(d){
        d.x = +d.x;
        d.y = d.y;

        return console.log(data);
    })

    var m = {t:30, r:20, b:40, l:45 },
        w = 600 - m.l - m.r,
        h = 500 - m.t - m.b;

    var x = d3.scale.linear()
        .range([0, w])
        .domain([0,d3.max(data, function(d){return d.x})]);

    var y = d3.scale.ordinal()
        .rangeRoundPoints([h-18,0])
        .domain(data.map(function(d){return d.y;}));   

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(8);

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(3);

    var svg = d3.select("#chart")
        .append("svg")
        .attr("width", w + m.l + m.r)
        .attr("height", h + m.t + m.b)
        .style("margin-left", "auto")
        .style("margin-right", "auto")
        .style("display", "block")
        .append("g")
        .attr("transform", "translate(" + m.l + "," + m.t + ")");     

    var circles = svg.selectAll("circle")
       .data(data)
       .enter()
       .append("circle")
       .attr("class", "circles")
       .attr({
        cx: function(d) { return x(d.x); },
        cy: function(d) { return y(d.y); },
        r: 8
      });

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + h + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    </script>
  </body>
</html>

答案＃1

首先创建一个提示工具 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);   
        });

  })

这里的工作代码

希望这能帮到你！

答案＃2

还有一种向 d3 图表添加工具提示的方法是使用 svg:title 元素。

在 SVG 绘图中，每个容器元素或图形元素都可以提供一个标题描述字符串，该描述是仅文本的。当当前 SVG 文档片段以 SVG 形式在视觉媒体上呈现时，标题元素不会作为图形的一部分进行渲染。然而，一些用户代理可能会例如将标题元素显示为工具提示。

编辑:

如果工具提示文本很长，你可以在某些间隔使用\n将其分成多行。

假设你的数据包含如下所示的描述。

 var data = [{
     x: 5,
     y: "area1",
     desc: 'description 1'
 }, {
     x: 34,
     y: "area2",
     desc: 'description 2'
 }, {
     x: 19,
     y: "area3",
     desc: 'description 3'
 }];

您可以按如下所示添加工具提示。

svg.select(".y.axis")
    .selectAll(".tick")
    .append("svg:title")
    .text(function(d, i) {
        return data[i].desc //Or some other custom decription
    });

var data = [{
       x: 5,
       y: "area1",
       desc: 'description 1 \n Long text 1'
     }, {
       x: 34,
       y: "area2",
       desc: 'description 2 \n Long text 2'
     }, {
       x: 19,
       y: "area3",
       desc: 'description 3 \n Long text 3'
     }];

     data.forEach(function(d) {
       d.x = +d.x;
       d.y = d.y;

       return console.log(data);
     })

     var m = {
         t: 30,
         r: 20,
         b: 40,
         l: 45
       },
       w = 600 - m.l - m.r,
       h = 500 - m.t - m.b;

     var x = d3.scale.linear()
       .range([0, w])
       .domain([0, d3.max(data, function(d) {
         return d.x
       })]);

     var y = d3.scale.ordinal()
       .rangeRoundPoints([h - 18, 0])
       .domain(data.map(function(d) {
         return d.y;
       }));

     var xAxis = d3.svg.axis()
       .scale(x)
       .orient("bottom")
       .ticks(8);

     var yAxis = d3.svg.axis()
       .scale(y)
       .orient("left")
       .ticks(3);

     var svg = d3.select("#chart")
       .append("svg")
       .attr("width", w + m.l + m.r)
       .attr("height", h + m.t + m.b)
       .style("margin-left", "auto")
       .style("margin-right", "auto")
       .style("display", "block")
       .append("g")
       .attr("transform", "translate(" + m.l + "," + m.t + ")");

     var circles = svg.selectAll("circle")
       .data(data)
       .enter()
       .append("circle")
       .attr("class", "circles")
       .attr({
         cx: function(d) {
           return x(d.x);
         },
         cy: function(d) {
           return y(d.y);
         },
         r: 8
       });

     svg.append("g")
       .attr("class", "x axis")
       .attr("transform", "translate(0," + h + ")")
       .call(xAxis);

     svg.append("g")
       .attr("class", "y axis")
       .call(yAxis);

     svg.select(".y.axis")
       .selectAll(".tick")
       .append("svg:title")
       .text(function(d, i) {
         return data[i].desc //Or some other custom decription
       });

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crishpEdges;
}
.tooltip-inner {
  white-space:pre-wrap;
}

<script src="http://d3js.org/d3.v3.min.js"></script>
<h1 style="text-align:center;">Example</h1> 
<div id="chart">
</div>