redraw

gistfile1.txt

var data = []
var gChild;

data.push([50,50]);
data.push([50,80]);
data.push([50,110]);
data.push([50,140]);

drawGraph();





function drawGraph()
{
	chart = d3.select("body")
	.append("svg:svg") 
	.attr("width", 400)
	.attr("height", 400)

	//create a parent g container
	var gParent = chart.append("svg:g") //g container
	.attr("class", "gParent");


	//create a nested g container
	gChild = gParent.append("svg:g") //g container
	.attr("class", "gChild");

	//create a g container
	var gBaby = gChild.selectAll("g.gBaby") 
	.data(data)
	.enter().append("svg:g")
	.attr("class", "gBaby")
	.on("click", function(d, i)
	{
		///data.splice(i,1)
		data.push(50,(i*110))
		redraw();
	});

	//append
	gBaby.append("svg:rect")
	.style("fill", "blue")
	.attr("x",function(p){return p[0]}) 
        .attr("y",function(p){return p[1]}) 
	.attr("height", 20)
	.attr("width", 100);

	//append
	gBaby.append("text")
	.attr("x",function(p){return p[0]}) 
        .attr("y",function(p){return p[1]}) 
	.text(function(d,i) { return "test " + i; });
}

function redraw()
{
	var container = gChild.selectAll("g")
	.data(data)
	
	 container.enter().append("g")
	.attr("class", "gBaby")
	

	container.exit()
       .remove();
	
	
       //redraw textbox
       var box = gChild.selectAll("rect")
	.data(data)
	
	 box.enter().append("rect")

	box.transition()
       .duration(1000)
       .attr("x",function(p){return p[0]}) 
        .attr("y",function(p){return p[1]}) 
       
	box.exit()
       .remove();
       
       //redraw text
        var text = gChild.selectAll("text")
	.data(data)
	
	 text.enter().append("text")

	text.transition()
       .duration(1000)
       	.attr("x",function(p){return p[0]}) 
        .attr("y",function(p){return p[1]}) 
       
	text.exit()
       .remove();
	
}