title: d3js bars not updating properly
body: <p>I created this bars with a tooltip. I need to get them update after the <code>$('.quarter-increase, .quarter-decrease').on('click', function() {</code></p>
  
  <p>I don't get any errors but nothing gets updated...</p>
  
  <pre><code>      $(document).ready(function() {
  
      $('#prof-rendi').click(function() {
        $('.graph-loading').show();
        $('#svg-quarter').empty();
        var tooltip = tooltipd3();
  
        var svg = d3.select("svg#svg-quarter"),
          margin = {
            top: 20,
            right: 20,
            bottom: 30,
            left: 40
          },
          width = +svg.attr("width") - margin.left - margin.right,
          height = +svg.attr("height") - margin.top - margin.bottom;
  
        var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
          y = d3.scaleLinear().rangeRound([height, 0]);
  
        var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
        var div = d3.select("#svg-quarter").append("div"). // declare the tooltip div
        attr("class", "tooltip"). // apply the 'tooltip' class
        style("opacity", 0);
  
        d3.csv(base_url() + 'graph/getStatementsQuarterly/', function(d) {
          $('.graph-loading').hide();
          d.guadagno = +d.guadagno;
          return d;
        }, function(error, data) {
          if (error) 
            throw error;
  
          x.domain(data.map(function(d) {
            return d.periodo;
          }));
          y.domain([
            0,
            d3.max(data, function(d) {
              return d.guadagno;
            })
          ]);
  
          g.append("g").attr("class", "axis axis--x").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(x));
  
          g.append("g").attr("class", "axis axis--y").call(d3.axisLeft(y).ticks(10)).append("text").attr("transform", "rotate(-90)").attr("y", 6).attr("dy", "0.71em").attr("text-anchor", "end").text("Guadagno")
  
          g.selectAll(".bar").data(data).enter().append("rect").attr("class", "bar").attr("x", function(d) {
            return x(d.periodo);
          }).attr("y", function(d) {
            return y(d.guadagno);
          }).attr("width", x.bandwidth()).attr("height", function(d) {
            return height - y(d.guadagno);
          }).on('mouseover', function(d) {
            var html = '&lt;h5&gt;' + d.guadagno + ' €&lt;/h5&gt;';
            tooltip.mouseover(html); // pass html content
          }).on('mousemove', tooltip.mousemove).on('mouseout', tooltip.mouseout);
        });
      });
  
      $('.quarter-increase, .quarter-decrease').on('click', function() {
        $('.rendi-btn.left, .rendi-btn.right').attr('disabled', 'disabled');
        var where_at = $('#scroll-statement-quarter').val();
        $('.graph-loading').show();
        $('#svg-quarter').css({'opacity': 0.4});
  
        var tooltip = tooltipd3();
  
        var svg = d3.select("svg#svg-quarter"),
          margin = {
            top: 20,
            right: 20,
            bottom: 30,
            left: 40
          },
          width = +svg.attr("width") - margin.left - margin.right,
          height = +svg.attr("height") - margin.top - margin.bottom;
  
        var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
          y = d3.scaleLinear().rangeRound([height, 0]);
  
        var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
        var div = d3.select("#svg-quarter").append("div"). // declare the tooltip div
        attr("class", "tooltip"). // apply the 'tooltip' class
        style("opacity", 0);
  
        var speed = 500;
  
        d3.csv(base_url() + 'graph/getStatementsQuarterly/' + where_at, function(d) {
          $('.graph-loading').hide();
          d.guadagno = +d.guadagno;
          return d;
        }, function(error, data) {
          if (error) 
            throw error;
  
          x.domain(data.map(function(d) {
            return d.periodo;
          }));
          y.domain([
            0,
            d3.max(data, function(d) {
              return d.guadagno;
            })
          ]);
  
          g.append("g").attr("class", "axis axis--x").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(x));
  
          g.append("g").attr("class", "axis axis--y").call(d3.axisLeft(y).ticks(10)).append("text").attr("transform", "rotate(-90)").attr("y", 6).attr("dy", "0.71em").attr("text-anchor", "end").text("Guadagno")
  
          g.selectAll(".bar").data(data).transition().duration(speed).attr("class", "bar").attr("x", function(d) {
            return x(d.periodo);
          }).attr("y", function(d) {
            return y(d.guadagno);
          }).attr("width", x.bandwidth()).attr("height", function(d) {
            return height - y(d.guadagno);
          }).on('mouseover', function(d) {
            var html = '&lt;h5&gt;' + d.guadagno + ' €&lt;/h5&gt;';
            tooltip.mouseover(html); // pass html content
          }).on('mousemove', tooltip.mousemove).on('mouseout', tooltip.mouseout);
        });
      })
    });
  </code></pre>
  
  <p>This is a Plunker to test this:
  <a href="https://plnkr.co/edit/72GCWqkllMFXZI6mecQE?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/72GCWqkllMFXZI6mecQE?p=preview</a></p>
  
  <p>Press "show", then change the year to 2016 and you will see the result.</p>