I have been following along with Curran’s excellent D3 tutorials and I would like to tackle a project where I can generate an Org Chart from a CSV file that includes columns for the row_id and parent_row_id values. As with a typical org chart, I am looking to render auto-generated connector lines throughout the parent/child hierarchy, and where each node can be expanded or collapsed in terms of displaying/hiding any child nodes. I do see a package on npm for this, but I would like to learn how to build my own code for this project. Would anyone be aware of a very simple example that does most of what I describe above?
Is it a tree data structure? If so, try getting started by making a tidy tree layout and then iterate from there to add the links. What you describe is definitely not simple.
Thanks Curran. I did get to see your Tree tutorial after I submitted this question, so yes, using Tree in the vertical mode would appear to be the starting point here. Ideally, I would be looking for a way to render the autogenerated child connector lines such that these connector line paths are a series of vertical/horizontal connector lines only (versus the rounded lines that automatically render now). I guess the best visual example to describe what I am looking for would be a Power One-Line diagram. Anyway, I will investigate more and see if this is feasible.
Note that you can pass a curve into link - see https://github.com/d3/d3-shape/blob/main/README.md#link.
Passing curveStep might give you what you’re after - see https://github.com/d3/d3-shape/blob/main/README.md#curveStep
Arrowheads are notoriously difficult, but there are plenty of examples out there to draw from.
Good luck!
This looks promising. Thank you, Curran.