I recommend BlockUI for this scenario.

I'm sure that for a faster computer, the freeze might not happen but to prevent it for other cases, why not have a UI block feature that can either block over the element containing your D3.js table, or simply the entire page (if that's how big your table is)?

That ways the user won't need to see everything freeze until it's rendered, and then you can $.unblockUI(); to unlock everything.

I would also take a look here for a checklist of things that can speed up the rendering.


Try building the table up in a Document Fragment, and then add the document fragment to the DOM all at once.

Something like:

var docFrag = document.createDocumentFragment()
var table ="table").attr("class", "graph-key"),
    thead = table.append("thead"),
    tbody = table.append("tbody");
[... the rest of your code should work ...]

Then after you build up your document fragment to have the table just like you want it:


This technique should not lock the UI, since the locking was likely from constantly repainting the DOM for each of your 9000 rows. This will only trigger 1 repaint.

Related Query

More Query from same tag