score:1

Accepted answer

In your update, this line:

var texts = svg.selectAll("text")
               .data(dataset);

is not only selecting your text labels on top of the bars but it also selecting the text labels that are part of the axis.

Easy fix is to assign a unique class to your text labels and select on that to update them.

Here's it all fixed up:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style type="text/css">
	.axis path,
	.axis line {
		fill: none;
		stroke: black;
		shape-rendering: crispEdges;
	}
	.axis text {
		font-family: sans-serif;
		fill: black;
		font-size: 13px;
	}
	    div.bar {
        display: inline-block;
        width: 20px;
        background-color: teal;
    }
</style>
        </head>
        <body>
        	<p>Click on this text to update the chart</p>
			<script type="text/javascript">
				
				w = 600, h = 500, padding = 30;
				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.scale.ordinal()
							         .domain(d3.range(dataset.length))
							         .rangeRoundBands([padding, w - padding], 0.05);
				var yScale = d3.scale.linear()
							         .domain([ 0,
							         		   d3.max(dataset)])
							         .range([ h - padding, padding ]);				
				var xAxis = d3.svg.axis()
								  .scale( xScale )
								  .orient("bottom")
								  .ticks( 10 );
				var yAxis = d3.svg.axis()
								  .scale( yScale )
								  .orient("left");
				var svg = d3.select("body")
							 .append("svg")
							 .attr("width", w)
							 .attr("height", h);
				svg.selectAll("rect")
			   	   .data(dataset)
				   .enter()
				   .append("rect")
				   .transition()
				   .delay(function(d, i){
				   		return i * 100;
			   		})
				   .duration(500)
				   .attr("x", function(d, i){
				   		return xScale(i)
				   })
				   .attr("y", function( d ){
			   			return yScale( d );
				   })
				   .attr("width", xScale.rangeBand())
				   .attr("height", function(d){
				   		return  h - yScale( d ) - padding - 1;
				   })
			   	   .attr("fill", function( d ){
			   			return "rgb(150, 220, " + (d * 10) + ")";
				   });
				svg.selectAll("text")
				   .data(dataset)
				   .enter()
				   .append("text")
				   .attr("class","myLabels")
				   .transition()
					   .delay(function(d, i){
					   		return i * 100;
				   		})
			   	   .text(function(d){
			   			return d;
				   })
				   .attr("x", function(d, i){
				   		return xScale( i ) + xScale.rangeBand()/2;
				   })
				   .attr("y", function( d ){
			   			return  yScale( d ) - 2;
				   })
				   .attr("text-anchor", "middle")
				   .attr("fill", "red");

				svg.append("g")
				   .attr("class", "x axis")
				   .attr("transform", "translate(0, " + (h - padding) + ")")
				   .call(xAxis);
				svg.append("g")
				   .attr("class", "y axis")
				   .attr("transform", "translate(" + (padding) + ", 0)")
				   .call(yAxis);

				d3.select("p")
				  .on("click", function(){
				  	for(var i = 0; i < 2; i++ ){
				  		var newNumber = Math.floor(Math.random()*25 );
				  		dataset.push( newNumber );
				  	}

				xScale.domain(d3.range(dataset.length));

				yScale.domain([ 0, d3.max(dataset)]);				
				
				var bars = svg.selectAll("rect")
				   .data(dataset);

				   bars.enter()
				   .append("rect")
				   .attr("x", w - padding)
				   .attr("y", function( d ){
			   			return yScale( d ) ;
				   	})
				   .attr("width", xScale.rangeBand())
				   .attr("height", function(d){
					   	return  h - yScale( d ) - padding;
				   })
				   .attr("fill", function( d ){
			   			return "rgb(150, 220, " + (d * 10) + ")";
				   })
				bars.transition()
				    .duration(500)
				    .attr("x", function(d, i){
				   		return xScale( i );
				    })
				    .attr("y", function( d ){
			   			return yScale( d );
				    })
				    .attr("width", xScale.rangeBand())
				    .attr("height", function(d){
					   	return  h - yScale( d ) - padding  - 1;
				    });
				   
			    
			    
			    var texts = svg.selectAll(".myLabels")
					           .data(dataset);
			    texts.enter()
					 .append("text")
					 .attr("class","myLabels")
					 .text(function(d){ return d; })
					 .attr("x", w - padding)
					 .attr("y", function( d ){
			   				return yScale( d ) - 2;
				     })
					 .attr("text-anchor", "middle")
					 .attr("fill", "red");

			    texts.transition()
			         .duration(500)
				   	 .text(function(d){
				   			return d;
					   })
					 .attr("x", function(d, i){
					   		return xScale( i ) + xScale.rangeBand()/2;
					 })
					 .attr("y", function( d ){
			   				return yScale( d ) - 2;
				      })
					 .attr("text-anchor", "middle")
					 .attr("fill", "red");
					 
				svg.select( ".x.axis")
				   .transition()
				   .duration(1000)
				   .call(xAxis);
				    svg.select( ".y.axis")
				   .transition()
				   .duration(1000)
				   .call(yAxis);
			        
				  });


            </script>
        </body>
</html>


Related Query