DAG not rendering for this graph

[msaqib]

Hi,
I used the codepen to try to render this graph, but it didn't work. I didn't see any errors in the console, either. Essentially, I replaced the data array which was being fetched from github with the following JavaScript array. Any idea why this might be happening?
let data = [ {"id": "0", "parentIds": []}, {"id": "1", "parentIds": ["0"]}, {"id": "2", "parentIds": ["0"]}, {"id": "3", "parentIds": ["0"]}, {"id": "4", "parentIds": ["0", "5"]}, {"id":"5", "parentIds": ["0"]}, {"id":"6", "parentIds": ["1"]}, {"id":"7", "parentIds": ["1"]}, {"id":"8", "parentIds": ["1"]}, {"id":"9", "parentIds": ["2"]}, {"id":"10", "parentIds": ["2"]}, {"id":"11", "parentIds": ["2"]}, {"id":"12", "parentIds": ["3"]}, {"id":"13", "parentIds": ["3"]}, {"id":"14", "parentIds": ["3"]}, {"id":"15", "parentIds": ["3"]}, {"id":"16", "parentIds": ["3"]}, {"id":"17", "parentIds": ["4"]}, {"id":"18", "parentIds": ["4"]}, {"id":"19", "parentIds": ["4"]}, {"id":"20", "parentIds": ["4"]}, {"id":"21", "parentIds": ["4"]}, {"id":"22", "parentIds": ["5"]}, {"id":"23", "parentIds": ["5"]}, {"id":"24", "parentIds": ["6"]}, {"id":"25", "parentIds": ["6"]}, {"id":"26", "parentIds": ["6"]}, {"id":"27", "parentIds": ["6"]}, {"id":"28", "parentIds": ["6"]}, {"id":"29", "parentIds": ["7"]}, {"id":"30", "parentIds": ["7"]}, {"id":"31", "parentIds": ["7"]}, {"id":"32", "parentIds": ["8"]}, {"id":"33", "parentIds": ["8"]}, {"id":"34", "parentIds": ["8"]}, {"id":"35", "parentIds": ["8"]}, {"id":"36", "parentIds": ["8"]}, {"id":"37", "parentIds": ["10"]}, {"id":"38", "parentIds": ["11"]}, {"id":"39", "parentIds": ["11"]}, {"id":"40", "parentIds": ["11"]}, {"id":"41", "parentIds": ["11"]}, {"id":"42", "parentIds": ["13"]}, {"id":"43", "parentIds": ["15"]}, {"id":"44", "parentIds": ["15"]}, {"id":"45", "parentIds": ["15"]}, {"id":"46", "parentIds": ["16"]}, {"id":"47", "parentIds": ["22"]}, {"id":"48", "parentIds": ["22"]}, {"id":"49", "parentIds": ["22"]}, {"id":"50", "parentIds": ["22"]}, {"id":"51", "parentIds": ["22"]}, {"id":"52", "parentIds": ["23"]}, {"id":"53", "parentIds": ["23"]}, {"id":"54", "parentIds": ["23"]}, {"id":"55", "parentIds": ["0", "1"]}, {"id":"56", "parentIds": ["5"]}, {"id":"57", "parentIds": ["4", "5"]}, {"id":"58", "parentIds": ["61"]}, {"id":"59", "parentIds": ["61"]}, {"id":"60", "parentIds": ["0", "58", "59"]}, {"id":"61", "parentIds": ["0"]}, {"id":"62", "parentIds": ["61"]}, {"id":"63", "parentIds": ["61"]} ]
Thanks and best regards
Saqib

[msaqib]

I ran it locally on my machine and saw an error that said that the graph was too big. On the decrossOpt() call, the error suggested using the "medium" setting. I am trying out various options now.

[erikbrinkman]

Yeah, decrossOpt only really works for small graphs, but decrossTwolayer should work just about as well

[msaqib]

Thank you. I hope it's OK if I ask a follow up question.
I'm trying to replicate this graph with a few extra edges.
My full code is here. I'm not getting a reasonable layout. Unfortunately, I couldn't really grasp the d3-dag documentation to figure it out. Either I lack some background or the documentation is for a different audience.
I'd appreciate any tips on where to look and what to try. Note that I am using somewhat older versions of D3 and D3-Dag because I succeeded in getting your codepen to at least work on my machine.

[msaqib]

I've made an attempt to dynamically set the size of the nodes to contain the text. Again, not working as expected, but the changes are saved to the codepen.
I was thinking that nodeSize() would consider a node's size while calculating the Sugiyama layout. But, later I read in the documentation that it is for the distance between nodes. Perhaps this isn't what I should have been doing.

[erikbrinkman]

Sorry for the delay! You were really close! I'm not super familiar with what clientWidth is returning, but it seems to be returning closer to a half width than a full width. This is the right value to use circle.r, but for node size you need the full width. so you should be use using clientWidth * 2. Also, as you rightly observed, nodeSize is both the size and the spacing, so you want a little more. 2 * clientWidth + 5 worked well for me.

However, I hear your pain points and am already working on addressing all of them:

1. Documentation isn't great - I'm working on a somewhat large change, that hopefully includes better documentation and examples
2. Node size vs gap - in the newer version these are separated so that nodeSize should return the exact size, and gap allows you to specify the space between nodes.
3. While this layout looks okay, the large variance in heights produces some overlapping lines and not a great layout. I'm working on an option that will produce much better layouts when nodes have different heights.

For three, in the short term, you can also make them ellipses to produce a layout more like:

Alternatively, doing some line wrapping, and measuring width and height should make the circles more compact which would probably be the best layout.

[msaqib]

Thanks Erik for the detailed reply. Those are really helpful pointers for the short term. Thanks also for working on the longer term fixes.