This example revisits the box transition lesson, which was an initial attempt to build a box layout function for D3. That lesson exposed my emerging understanding of transition behavior. Clearly, the result was awkward. Box outlines would move before they morphed. It had to finish one task before it could start another.
For a seamless transition, this version eliminates the transform translate transition on the starting point of each box in the box layout transition code. Now, each box outline has a path that originates from the starting point and expresses either an open box (square) or a closed box (rectangle). This method makes a smooth box transition with nothing that sticks out.
This change exposed another issue where the click handler on the box would sometimes fire for an adjacent box, but not always. This issue was fixed by adding the box contents only to the open box. Now the update code removes the contents of the previously open box and adds the appropriate diagram contents of the newly opened box.