d3 treemap rect orientation error when updating - svg

Question

I wrote a d3.js treemap that updates and re-renders when I receive new data. When I do graph the maps, the rects sometimes shift positions, and it seems like the orientation of the elements is messed up because they move outside the chart or overlap with another element, leaving whitespace in the throughout the graph, but after re-rendering the graph usually corrects itself, and then messes up again. I think the problem comes about because the graph is resizing itself with regards to absolute positions, but rects in certain positions from the previous render are messing things up. Any clue how to stop this intermediate phase of having a messed up graph before being able to re-render? Thanks.
This is the code I use to initially draw the d3 regraph.
function drawTreeMap(array1,array2, colorArray)
{
console.log("got to drawing");
var cellMargin=5;
this.marginTree = {top:20, right:20, bottom:20, left:20};
var coloring = d3.scale.linear()
.range(['lightblue', 'green']) // or use hex values
.domain([this.getMinOfThisArray(colorArray), this.getMaxOfThisArray(colorArray)]);
this.nestedJson = this.createObj(array1, array2, colorArray);
this.w = 1700 - 80,
this.h = 980 - 180,
this.x = d3.scale.linear().range([0, this.w]),
this.y = d3.scale.linear().range([0, this.h]),
this.root,
this.node;
this.treemap = d3.layout.treemap()
.round(false)
.size([this.w, this.h])
.sticky(true)
.padding([this.marginTree.bottom, this.marginTree.right, this.marginTree.top, this.marginTree.left])
.sort(function(a,b) {
return a.value - b.value;
})
.value(function(d) { return d.size; });
this.svg = d3.select("#body").append("div")
.attr("class", "chart")
.style("position", "relative")
.style("width", (this.w) + "px")
.style("height", (this.h ) + "px")
.style("left", this.marginTree.left +"px")
.style("top", this.marginTree.top + "px")
.append("svg:svg")
.attr("width", this.w)
.attr("height", this.h)
.append("svg:g")
.attr("transform", "translate(.5,.5)");
this.node = this.root = this.nestedJson;
var nodes = this.treemap.nodes(this.root)
.filter(function(d) { return !d.children; });
this.tip = d3.tip()
.attr('class', 'd3-tip')
.html(function(d) {
return "<span style='color:white'>" + (d.name+",\n "+d.size) + "</span>";
})
this.svg.call(this.tip);
var cell = this.svg.selectAll("g")
.data(nodes)
.enter().append("svg:g")
.attr("class", "cell")
.call(this.position)
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.on("click", function(d) { return this.zoom(this.node == d.parent ? this.root : d.parent); });
var borderPath = this.svg.append("rect")
.attr("class", "border")
.attr("x", this.marginTree.left)
.attr("y", this.marginTree.top)
.attr("height", this.h - this.marginTree.top - this.marginTree.bottom )
.attr("width", this.w - this.marginTree.left - this.marginTree.right)
.style("stroke", 'darkgrey')
.style("fill", "none")
.style("stroke-width", '3px');
cell.append("svg:rect")
.attr("id", function(d,i) { return "rect-" + (i+1); })
.attr("class","highlighting2 cell-rects")
.attr("title", function(d) {return (d.name+", "+d.size);})
.attr("data-original-title", function(d) {return (d.name+",\n "+d.size);})
.attr("width", function(d) { return d.dx ; })
.attr("height", function(d) { return d.dy ; })
.on('mouseover', this.tip.show)
.on('mouseout', this.tip.hide)
.style("fill", function(d) {return coloring(d.color);});
cell.append("svg:text")
.attr("class", "treemap-text nameTexts")
.attr("id", function(d,i) { return "name-" + (i+1); })
.attr("x", cellMargin)
.attr("y", function(d) { return parseInt($('.treemap-text').css('font-size'))+cellMargin; })
.text(function(d) {return (d.name);});
cell.append("svg:text")
.attr("class", "treemap-text sizeTexts")
.attr("id", function(d,i) { return "size-" + (i+1); })
.attr("x", cellMargin)
.attr("y", function(d) { return 2*parseInt($('.treemap-text').css('font-size'))+2*cellMargin; })
.text(function(d) {return (d.size);});
// d3.selectAll("svg:rect")
// .style("stroke-width", 2)
// .style("stroke", function(d){ return this.LightenDarkenColor(coloring(d.color), -5);});
this.treeMapping = true;
$(document).ready(function(){
for (var i =1 ; i<graphObj.rc.positions[graphObj.currentVpName].SetSize; i++){
var obj = "rect-"+i;
var size = "size-"+i;
var name = "name-"+i;
graphObj.formatNumbers(size);
graphObj.placeTextWithEllipsis(obj, size);
graphObj.placeTextWithEllipsis(obj, name);
}
d3.selectAll(".nameTexts")
.style("fill", "#333333");
d3.selectAll(".sizeTexts")
.style("fill","#383838");
});
}
This is the file I use to re-render the treemap when I receive new data.
function redrawGraph(array1, array2, colorArray)
{
this.nestedJson = this.createObj(array1, array2, colorArray);
var coloring = d3.scale.linear()
.range(['lightblue', 'green']) // or use hex values
.domain([this.getMinOfThisArray(colorArray), this.getMaxOfThisArray(colorArray)]);
var cellMargin = 5;
this.svg = d3.select("#body").append("div")
this.treemap
.mode("squarify")
.round(false)
.size([this.w,this.h])
.sticky(true)
.value(function(d) { return d.size; });
// Draw the graph
this.node = this.root = this.nestedJson;
var nodes = this.treemap.nodes(this.root)
.filter(function(d) { return !d.children; });
var rect = d3.select("#body").selectAll(".cell-rects")
.data(nodes);
rect.exit().remove();
rect.enter().append("rect");
rect
.transition()
.attr("width", function(d) { return d.dx ; })
.attr("height", function(d) { return d.dy ; })
.attr("title", function(d) {return (d.name+", "+d.size);})
.attr("data-original-title", function(d) {return (d.name+",\n "+d.size);})
.style("fill", function(d) { return coloring(d.color)})
.call(this.position);
var text = d3.select("#body").selectAll(".nameTexts")
.data(nodes);
text.exit().remove();
text.enter().append("text");
text
.attr("class", "treemap-text nameTexts")
.attr("x", cellMargin)
.attr("y", function(d) { return parseInt($('.treemap-text').css('font-size'))+cellMargin; })
.text(function(d) { return (d.name); });
var text2 = d3.select("#body").selectAll(".sizeTexts")
.data(nodes);
text2.exit().remove();
text2.enter().append("text");
text2
.attr("class", "treemap-text sizeTexts")
.attr("x", cellMargin)
.attr("y", function(d) { return 2*parseInt($('.treemap-text').css('font-size'))+2*cellMargin; })
.text(function(d) { return (d.size); });
var cell = this.svg.selectAll("g")
cell.append("svg:rect")
cell.append("svg:text");
// var border = this.svg.append("rect")
// .attr("x", this.marginTree.left)
// .attr("y", this.marginTree.top)
// .attr("height", this.h - this.marginTree.top - this.marginTree.bottom )
// .attr("width", this.w - this.marginTree.left - this.marginTree.right)
// .style("stroke", 'darkgrey')
// .style("fill", "none")
// .style("stroke-width", '3px');
// d3.select(window).on("click", function() {
// this.zoom(this.root); });
// d3.select("select").on("change", function()
// {
// this.treemap.value(this.value == "size" ? this.size : this.count).nodes(this.root);
// this.zoom(this.node);
// });
d3.selectAll(".nameTexts")
.style("fill", "#333333");
d3.selectAll(".sizeTexts")
.style("fill","#383838");
$(document).ready(function(){
for (var i =1 ; i<graphObj.rc.positions[graphObj.currentVpName].SetSize; i++){
var obj = "rect-"+i;
var size = "size-"+i;
var name = "name-"+i;
graphObj.formatNumbers(size);
graphObj.placeTextWithEllipsis(obj, size);
graphObj.placeTextWithEllipsis(obj, name);
}
});
}
function position()
{
this.style("left", function(d) { return d.x + "px"; })
.style("top", function(d) { return d.y + "px"; })
.style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
.style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}
Also by white space I mean this.
Image is linked here. [http://i.stack.imgur.com/LTLk6.png][1]