D3 Examples - 25. SVG element tooltip

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    
        <title>D3: An SVG element tooltip</title>
    
        <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
        <style type="text/css">
​
            rect:hover {
                fill: orange;
            }
​
        </style>
    </head>
    <body>
        <script type="text/javascript">
​
​
            var w = 600;
            var h = 250;
            
            var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                            11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
​
            var xScale = d3.scaleBand()
                            .domain(d3.range(dataset.length))
                            .rangeRound([0, w])
                    .padding(0.05);
​
            var yScale = d3.scaleLinear()
                            .domain([0, d3.max(dataset)])
                            .range([h, 0]);
            
​
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
​
​
            svg.selectAll("rect")
               .data(dataset)
               .enter()
               .append("rect")
               .attr("x", function(d, i) {
                    return xScale(i);
               })
               .attr("y", function(d) {
                    return yScale(d);
               })
               .attr("width", xScale.bandwidth())
               .attr("height", function(d) {
                    return h - yScale(d);
               })
               .attr("fill", function(d) {
                    return "rgb(0, 0, " + (d * 10) + ")";
               })
      
// ---- mouseover to create a svg text to display value on (x,y)   ------------   
               .on("mouseover", function(d) {
​
                    //Get this bar's x/y values for tooltip's (x,y)
                    var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.bandwidth() / 2;
                    var yPosition = parseFloat(d3.select(this).attr("y")) + 14;
​
// ---- create a text on svg, not at the rect
                    svg.append("text")
                       .attr("id", "tooltip")
                       .attr("x", xPosition)
                       .attr("y", yPosition)
                       .attr("text-anchor", "middle")
                       .attr("font-family", "sans-serif")
                       .attr("font-size", "11px")
                       .attr("font-weight", "bold")
                       .attr("fill", "black")
                       .text(d);
​
               })
      
      
               .on("mouseout", function() {
               
                    //Remove the tooltip
                    d3.select("#tooltip").remove();
                    
               })
      
      
               .on("click", function() {
                    sortBars();
               });
​
​
            var sortOrder = false;
            
​
            var sortBars = function() {
​
// ---- when doing sorting transition, firstly remove tooltip text -----
                d3.select("#tooltip").remove();
        
                sortOrder = !sortOrder;
​
                svg.selectAll("rect")
                   .sort(function(a, b) { 
                        if (sortOrder) {
                            return d3.ascending(a, b);
                        } else {
                            return d3.descending(a, b);
                        }
                    })
                   .transition()
                   .delay(function(d, i) {
                       return i * 50;
                   })
                   .duration(1000)
                   .attr("x", function(d, i) {
                        return xScale(i);
                   });
​
            };          
            
​
      
        </script>
    </body>
</html>
    