This is not a new question and I have already referred to solutions stating that nodes must have their d.x d.y parameters set to suitable values before restarting the layout.
I have also created a simple block demonstrating this. However now that I have developed a more complex example here I am not satisfied with the result.
The reason being that as you click on the nodes, new nodes come into existence off screen and the force layout is erratic (not good), however once all the nodes appear at least once the nodes appear to behave as desired and appear close to the centre and hence produce minimal disturbance to the layout.
My feeling is that either this is the best I can expect from d3 or that there is some inconsistency in the data model model of my code.
The code itself is designed to display a smaller subset of a larger graph loaded from the JSON. It allows you to navigate a larger graph one subset at a time. The subsets being centred on the node that was clicked.