All geek questions in one place

Mouse over event on d3.js javascript axis label

Does anyone know if it is possible to have a mouse event over an event on a Y axis label? For example, I have a scatter plot below. The labels on the y axis are "area1", "area2" and "area3". When the user places the label "area1", a tooltip will appear to display a description of the area 1. I have not seen such examples before. Does anyone know how to do this? Many thanks!
Here I have a pluker 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>
+4
source share
2 answers

To do this, first create a tooltip 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);   
        });

  })

, !

+5

d3 svg:title.

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


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>
Hide result
+2

Source: https://habr.com/ru/post/1618185/

More articles:


All Articles