d3js酒吧沒有正確更新

Question

我用工具提示創建了這個酒吧。我需要讓他們的$('.quarter-increase, .quarter-decrease').on('click', function() {

後更新我沒有得到任何錯誤，但沒有得到更新...

 $(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 = '<h5>' + d.guadagno + ' €</h5>'; 
      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 = '<h5>' + d.guadagno + ' €</h5>'; 
      tooltip.mouseover(html); // pass html content 
     }).on('mousemove', tooltip.mousemove).on('mouseout', tooltip.mouseout); 
     }); 
    }) 
    }); 

這是一個Plunker來測試這一點： https://plnkr.co/edit/72GCWqkllMFXZI6mecQE?p=preview

按下「顯示「，然後將年份更改爲2016年，您將看到結果。

Answer 1

您點擊事件處理程序中的g變量是新添加的<group>元素。

因此，這...

g.selectAll(".bar").data(data).etc... 

...將無法工作，因爲沒有與該組中的一類.bar。

解決方法：使用svg變量來選擇矩形：

​​

這裏是更新plunker：https://plnkr.co/edit/eNa6Af0WcyrcLejadO2q?p=preview

PS：此代碼有幾個問題。我強烈建議你不要混用jQuery和D3，也不要在事件處理程序中使用d3.csv。