Question

是否有人知道是否可以在y轴标签上使用鼠标悬停事件？例如，我在下面有一个散点图。 y轴上的标签是“area1”，“area2”和“area3”。当用户悬停标签“area1”时，将弹出工具提示以显示area1的描述。我以前没有看到过这样的例子。有人知道怎么做吗？非常感谢！
我在这里也有一个傻瓜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>

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

  })

工作代码here

希望这有帮助！

Answer 2

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

SVG图形中的每个容器元素或图形元素都可以提供标题描述字符串，其中描述为纯文本。当前SVG文档片段在视觉上呈现为SVG时 media，title元素不会呈现为图形的一部分。然而，例如，一些用户代理可以将标题元素显示为工具提示。

修改：

如果工具提示文字很长，您可以按特定间隔使用\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
    });

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: