D3 Examples - 22.on-mouse-over-out-transition

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: Smoother highlight transitions</title>
    
        <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
        
    <style type="text/css">
            /* No style rules here yet */       
        </style>
    
    </head>
    <body>
        <script type="text/javascript">
​
​
            var w = 600;
            var h = 250;
            
  
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
​
      
            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]);
            
​
            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) + ")";
               })
      
// ---- event listener: .on("mouseover", function(){})      
               .on("mouseover", function() {
                    d3.select(this)
                        .attr("fill", "orange");
               })
      
// ---- event listener: .on("mouseout", function(){})          
               .on("mouseout", function(d) {
                   d3.select(this)
                        .transition()
                        .duration(250)
                        .attr("fill", "rgb(0, 0, " + (d * 10) + ")");
               });
​
​
            svg.selectAll("text")
               .data(dataset)
               .enter()
               .append("text")
               .text(function(d) {
                    return d;
               })
​
// ---- on text, pointer events are such as click, mouseover, or mouseout, won't trigger any event
         .style("pointer-events", "none")
               .attr("text-anchor", "middle")
               .attr("x", function(d, i) {
                    return xScale(i) + xScale.bandwidth() / 2;
               })
               .attr("y", function(d) {
                    return yScale(d) + 14;
               })
               .attr("font-family", "sans-serif")
               .attr("font-size", "11px")
               .attr("fill", "white");
            
        </script>
    </body>
</html>
    