d3 bar char étiquettes transitions

Question

Im ayant un graphique à barres avec des étiquettes. Après l'actualisation des données, les étiquettes ne sont pas affichées correctement. Je ne sais pas ce que je fais mal avec la partie newToolTip. Les étiquettes ne sont pas supprimées et restent sur le canevas après la mise à jour des données.

Merci pour votre aide.

//function for button click event 
     function getValue(myDataArray) { 
     document.getElementById('choosenButton').innerHTML = 'chosen data: ' + myDataArray; 
     document.getElementById('choosenButton2').innerHTML = 'chosen data: ' + myDataArray; 

    //Scales pre chart1 set up for various dataarrays 
    var x = d3.scaleBand().domain(d3.range(0, eval(myDataArray).length)) 
     .range([0, svgWidth]) 
     .paddingInner(0.05); 

    var y = d3.scaleLinear() 
     .domain([0,d3.max(eval(myDataArray), function(d) { return (+d.balance)})]) 
     .range([0, svgHeight]); 

    // add the x Axis 
    var xAxis = d3.scaleBand() 
     .domain(eval(myDataArray).map(function(d) { return d.name})) 
     .range([0, svgWidth]) 
     .paddingInner(0.05); 

    //add y axis 
    var yAxis = d3.scaleLinear() 
     .domain([0, d3.max(eval(myDataArray), function(d) { return (+d.balance)})]) 
     .range([svgHeight, 0]); 


    var bars = myCanvas1.selectAll('rect').data(eval(myDataArray)); 
    var newToolTip = myCanvas1.selectAll('g').select('.tooltip').data(eval(myDataArray)); 

     //exit data 
     bars.exit() 
      .transition() 
      .duration(duration1) 
      .attr('height', svgHeight - function(d) { return (+d.balance)}) 
      .remove(); 

     //enter new data 
     bars.enter() 
      .append('rect') 
      .style('fill', 'steelblue') 
      .on('mouseover',mouseover) 
      .on('mouseout', mouseout) 
      .attr('x', function(d, i) { return x(i); }) 
      .attr('width', x.bandwidth()) 
      .attr('y', function(d) { return (svgHeight - y(+d.balance));}) 
      .attr('height', function(d) { return y(+d.balance); }) 
      .merge(bars) 
      .transition() 
      .duration(duration1) //update 
      .attr('x', function(d, i) { return x(i); }) 
      .attr('width', x.bandwidth()) 
      .attr('y', function(d) { return (svgHeight - y(+d.balance)); }) 
      .attr('height', function(d) { return y(+d.balance); }); 

     newToolTip.exit() 
      .transition() 
      .duration(duration1) 
      .remove(); 

     newToolTip.enter() 
      .append('text') 
      .attr('class', 'tooltip') 
      .style('fill', 'red') 
      .attr('x', function(d, i) { return x(i); }) 
      .attr('y', function(d) { return (svgHeight - y(+d.balance) - 20); }) 
      .text(function(d) { return +d.balance; }); 

     newToolTip.attr('x', function(d, i) { return x(i); }) 
      .style('fill', 'green') 
      .attr('y', function(d) { return (svgHeight - y(+d.balance) - 20); }) 
      .text(function(d) { return +d.balance; }); 

    myCanvas1.selectAll('g.yaxis') 
      .transition() 
      .duration(duration1) 
      .call(d3.axisLeft(yAxis)); 

    myCanvas1.selectAll('g.xaxis') 
      .transition() 
      .duration(duration1) 
       .call(d3.axisBottom(xAxis)) 
       .selectAll('text') 
       .attr('dx', '-2.2em') 
       .attr('dy', '-.15em') 
       .attr('transform', 'rotate(-65)'); 

    }; 

     function mouseover() { 
     d3.select(this).attr('opacity', .5); 
     }; 

     function mouseout() { 
     d3.select(this).attr('opacity', 1); 
     }; 

Answer 1

Voici le code de travail:

var labelsGroup = myCanvas1.append("g") 

    var labels = labelsGroup 
     .selectAll(".tooltip") 
     .data(dataArray1) 
     .enter() 
     .append('text') 
     .attr('class', 'tooltip') 
     .attr('x', function(d, i) { return x(i); }) 
     .attr('y', function(d) { return (svgHeight - y(+d.balance) - 20); }) 
     .text(function(d) { return +d.balance; }); 

et après cliquez sur mettre à niveau graphique avec:

var newToolTip = labelsGroup.selectAll('.tooltip').data(eval(myDataArray)); 

     newToolTip.exit() 
      .transition() 
      .duration(duration1) 
      .remove(); 

    newToolTip.enter() 
      .append("text") 
      .attr('class', 'tooltip') 
      .style('fill', 'red') 
      .attr('x', function(d, i) { return x(i); }) 
      .attr('y', function(d) { return (svgHeight - y(+d.balance) - 20); }) 
      .text(function(d) { return +d.balance; }) 
      .style('opacity', 1); 

     newToolTip.attr('x', function(d, i) { return x(i); }) 
      .style('fill', 'green') 
      .attr('y', function(d) { return (svgHeight - y(+d.balance) - 20); }) 
      .text(function(d) { return +d.balance; });