D3 Examples - 20.data-out-left-rect-out-right

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: Removing values from a chart</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>
    
        <p>Click on this text to remove a data value from the chart!</p>
            
        <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() // focus on newly entering, as we start from nothing
               .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) + ")";
               });
      
      
            
            svg.selectAll("text")
               .data(dataset)
               .enter()
               .append("text")
               .text(function(d) {
                    return d;
               })
               .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");
​
      
      
            d3.select("p")
                .on("click", function() {
​
        
                    dataset.shift();
                    
​
                    xScale.domain(d3.range(dataset.length));
        
                    yScale.domain([0, d3.max(dataset)]);        
        
​
                    var bars = svg.selectAll("rect")    
                        .data(dataset);                         
                    
// --- if enter new element, create it full far right outside first
                    bars.enter()
                        .append("rect")
                        .attr("x", w)
                        .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) + ")";
                        })
        
        
// ---- merge with update elements 
          .merge(bars)
          
//           make transition for both updated and newly created rects
                      .transition()
                        .duration(500)
                        .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);
                        });
        
        
// ---- data remove from left, but rect move out from right                         
                    bars.exit()             
                        .transition()       
                        .duration(500)
                        .attr("x", w)       // move out of far right edge
                        .remove();          
        
        
        
  var texts = svg.selectAll("text")
                       .data(dataset)       
  
        texts
            .enter().append("text")
                .text(function(d){return d})
                .attr("x", w + xScale.bandwidth()/2)
                .attr("y", function(d){return yScale(d)+14;})
                .attr("font-family", "sans-serif")
            .attr("font-size", "11px")
            .attr("fill", "white")
​
      .merge(texts)
                       .transition()
                       .duration(500)
                 .text(function(d){return d;})
                       .attr("x", function(d, i) {
                            return xScale(i) + xScale.bandwidth() / 2;
                       })
                       .attr("y", function(d) {
                            return yScale(d) + 14;
                       });
​
      texts
            .exit()
            .transition()
            .duration(500)
//              .attr("text-anchor", "start")
            .attr("x", function(d){return xScale(d)+xScale.bandwidth()})
            .remove();
                });
            
        </script>
    </body>
</html>
    