Enter, update, exit

forked from fryford's block: Enter, update, exit

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Enter, Update, Exit</title>
    
    
    <style>
	
	.axis path
	{
		fill: none;
	}
	.axis line
	{
		fill: none;
		stroke: #ccc;
		stroke-width: 0.1%
	}

.tick text {
		font-family:sans-serif,Helvetica,Arial;
		font-size:20px;
		fill:#666;
	}
	
	#mainChart
		{

width:100%;
			height:400px;
	
		}
		
	#chart {
	
		height:600px;
	
	}
	
	.chartBars {
		fill: #008cba;		
	}
	
	</style>

</head>
  <body>
  
    <div class="container">
       <div>
                  <a href='javascript:makeChart(array1)'>array1</a>
                  <a href='javascript:makeChart(array2)'>array2</a>
                  <a href='javascript:makeChart(array3)'>array3</a>
                  <a href='javascript:makeChart(array4)'>array4</a>
                  <a href='javascript:makeChart(array5)'>array5</a>
                  <a href='javascript:makeChart(array6)'>array6</a>
                  <a href='javascript:makeChart(array7)'>array7</a>
       </div>
 
       <div id="chart">

</div>
     
    </div>

function makeChart(array)
		{
			
			//Find out about the data
			
			//length of the array
			dvc.myInputDivisor = array.length;

//Find min/max 
			dvc.minValue = d3.min(array);
			dvc.maxValue = d3.max(array);
			
			
			//set up the scale objects as per normal

dvc.yScale=d3.scale.linear()
				.domain([Math.min(0,dvc.minValue),dvc.maxValue])
				.range([dvc.chartHeight,0])
				.nice();
				
			dvc.xScale = d3.scale.ordinal()
				.domain(array)
				.rangeRoundBands([0, dvc.chartWidth], dvc.gapRatio);
				
				
			//work out the width of the bars based on the nummber of records
				
			dvc.cellWidth=(1-dvc.gapRatio)*dvc.chartWidth/dvc.myInputDivisor;
			
			
			//Set up the chart object the data([array]) is part of a trick that means that it's only set up the once
			
			mainChart = d3.select("#chart").selectAll('svg').data([array]);
			
						
			//Add the main SVG - only once on enter
    	    mainChartEnter = mainChart.enter()
                              .append('svg')
							  .attr('id','mainChart')
							  .attr("viewBox", "0 0 770 540")
							  .attr("preserveAspectRatio","xMinYMin meet");
							  
			//Set up the axis - this is done on each call of the function

dvc.yAxisChar=d3.svg.axis()
					.scale(dvc.yScale)
					.orient("left")
					.tickSize(-(dvc.chartWidth))
					.ticks(8);
			
			//Append the axis - only once (mainChartEnter)
			mainChartEnter.append("g")
				.attr("class","axis")
				.attr("transform","translate("+ dvc.xPadding + ", " + dvc.yPadding + ")")
				.call(dvc.yAxisChar);

//removes the stroke on the y-axis vertical - only once	
			mainChartEnter.selectAll(".domain").style("stroke","none");

//add a group element for the bar - only once
			mainChartEnter.append("g")
				.attr("id","grpBars")
				.attr("transform", "translate(" + dvc.xPadding + "," + dvc.yPadding + ")");
			
			
			// Every time the function is called
			mainChart.select('.axis')
       		  	.transition()
  		       	.duration(500)
			  	.call(dvc.yAxisChar);
				
			
			//Same trick as before
			//Select the group element which contains the bars and then all the chartBars within
			bar = mainChart.select("#grpBars").selectAll(".chartBars")
				.data(array);
			
			//If the element is a new selection then append a rectangle - ENTER - Do the things you only want to do once.
			bar.enter()
					.append("rect")
					.attr("class", "chartBars")
					.attr("id",function(d,i) {
						console.log("I'm entering bar number" + (i+1)); 
						return "bar" + i;
					});

//If it's an existing selection just change these attributes - UPDATE - Do the things here you want to do apply to every element	
			bar.attr("width", dvc.cellWidth)
					.attr("y", function(d) { 
						return dvc.yScale(Math.max(0, d));
					})
					.attr("transform", function(d, i) {
						console.log("I'm updating bar number" + (i+1));
						return "translate(" + dvc.cellWidth* i +"," + 0  + ")";
					})
					.attr("height", function(d)	{
						return Math.abs(dvc.yScale(d) - dvc.yScale(0));
					});
					
				
			//If it's a selection that is no longer needed (ie there isn't a data point in the array for an existing bar) then remove it - REMOVE		
			bar.exit().remove();
				
		}

})
    
    </script>
  </body>
</html>

https://code.jquery.com/jquery-1.10.2.min.js

https://d3js.org/d3.v3.min.js