d3 bar char labels transitions - d3.js

Question

Im having a bar charts with labels. After data refresh labels are not shown correctly. Not sure what Im doing wrong with newToolTip part.
Labels are not removed and stay on canvas after update data.
Thanks for help.
//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

Here is working code:
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; });
and after click I upgrade chart with:
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; });