graph force, complex nodes, avoiding overlapping

New To Observable
1

Hi, I am doing a final project for a training course. I am trying to use D3 to represent relationships between SQL tables. Using the database schema, that has been parsed to object form (server side) I now have a list of links and nodes embedded in the html by jinja templating. D3 links are perfect, D3 nodes please correct me: I can add a word, but I can’t do anything more complex than a point or circle?

Tried a few different libraries server side to graph force to some effect, but really need D3 client side so I can access the window area sizes and the svg area. In addition I think I can use the ‘collision’ force to stop the table representations from overlapping by getting an approximate representation radius. Is this silly?

Prior to employing D3, I had tables as divs, like a bootstrap card (not bootstrap though) on a location calculated by the force library. The div model lets me list the column names beneath the table name. Java script lets me find the column in the tables at each end of the relationship, and jt lets me draw a nice bezier curve between them to represent the relationship.

Problem is that the tables are not points, so other libraries let them overlap. Looking at D3 I can simulate links, I can use force to spread the network out to be visible, and using collision radius to stop any overlap. Perfect.

I do not actually need D3 to draw a single node, or to draw a single link. (shame as v nice) I can set the css property to ‘visible: false;’ or something like that. I am using D3 force for the positional maths. I just need the x and y coordinates of each node, and use that to move the table div representations to their D3 calculated point.

Accessing x and y in D3. Ok I can do this but I can’t grok what I am getting, not enough to see where it relates to the svg x and y. I get some x and y float values that do not relate to the svg container x and y. D3 does draw something html element and that has node x and y in the svg axes, but for some reason, javascript will not give me these, since ‘they are dynamic’, or something like that. So instead I need to find a way of using the D3 x and y of each node. Is there a way of converting the D3 x and y to the svg x and y? I think I really need the edges of x and y as D3 is using them. The chat bots and Google are not helping enough.

Feels a bit bonkers that the browser is already doing this maths, but I can’t access it, so I need to write code to do it again so I have it. Thats a browser thing though not a D3 thing.

2

The dimensions that d3-force uses internally are arbitrary, and you will likely need to rescale them to fit your target dimensions (by calculating the bounding box of all nodes, including their radii). If you position HTML elements absolutely according to your layout then this might also mean that you need to apply a transform: scale to the parent container in order for the layout to fit into the viewport.

If you want to use HTML elements for which you plan to compute the bounding boxes in the browser, I would perhaps suggest that you try to calculate the link layout with ELK: GitHub - kieler/elkjs: ELK's layout algorithms for JavaScript which will also let you define ports and block out areas for link routing.

That being said, I’d consider using graphing libraries like graphviz or mermaid which will lay out the elements according to various rules (like minimizing link distance or link crossings). Within those tools you can create class diagrams which also happen to be a good fit for schema diagrams.