Accepted answer

One solution would be to make a timeout function like this:

  setTimeout(function() {
    //does the relayout
    //update all the nodes with new height
     function (d) { 
        return d.height; 
    //update all the path
    link.attr("d", path);

Inside the update function.

This will get triggered after the transition is complete.

working code here


If I'm right it's because the order of the data in your array does not match the order of their position. The array-order seems to determine in which order the dependencies are shown, unless you reposition any of the elements, which results in a rerendering.

I've tried reordering some elements of the data array, to follow the positions on the chart, and their size and the dependency-links between them automatically rendered fine.

I also noticed, that some elements, though listed in the array, do not get displayed in the chart, as they do not have any dependencies added.

Related Query