0

I am trying to build a class diagram model viewer using d3.js and d3.dag

A most crucial part of this viewer is that it should be able to optimally position nodes so that we won't have link crossing (whenever possible) and plus should be able to clearly see what's connected to what

We know:

  • Width of each node
  • Height of each node
  • Links starting coordinate
  • Links ending coordinate
  • Links all corner coordinates

We want:

  • To see connections ending (Can be achieved manually moving nodes).

  • To minimize links crossing (If it's possible)

What I need is kinda theoretical.

Is there any known algorithm which can solve the problem above (Language does not matter, I just need theoretical reference)

Putting examples below

  • What's the current situation
  • What can I achieve by myself
  • What would be perfect

Example 1.

Current

enter image description here

Achievable

enter image description here

Perfect

enter image description here

Example 2.

Current

enter image description here

Achievable

enter image description here

Perfect

enter image description here

Example 3.

Current

enter image description here

Achievable And Perfect

enter image description here

Example 4.

Current

enter image description here

Achievable

enter image description here

Perfect

enter image description here

Example 5.

Current

enter image description here

Achievable

enter image description here

Perfect

enter image description here

Example 6.

Current

enter image description here

Perfect

enter image description here

Update

Traditional (node to node link ) crossing is already minimized in this case (thanks to d3-dag). The issue is that we don't have the only node to node relationship, we also have a node row to row relationship and in this case, d3-dag fails

bumbeishvili
  • 1,342
  • 14
  • 27
  • Possible duplicate of [Edge crossing reduction in graph](https://stackoverflow.com/questions/13963073/edge-crossing-reduction-in-graph) – Prune Feb 19 '19 at 18:31
  • 1
    Not exactly, traditional (node to node link ) crossing is already minimized (thanks to d3-dag). The issue is that we don't have the only node to node relationship, we also have a row to row relationship and in this case, d3-dag fails to address this – bumbeishvili Feb 19 '19 at 18:44
  • 1
    https://en.wikipedia.org/wiki/Graph_drawing – Bergi Feb 19 '19 at 19:02
  • Hi, I’m having a similar task. What you have done is impressive. I’m still stuck at drawing the table. How did you draw the link to specific row of the table? Do you have a repo for that somewhere that I can look into? Thanks – Winchester Mar 01 '23 at 20:40
  • Oh, after googling a bit more, it looks like you're selling this app. I totally understand, it's a complex app. My best guess is that a table in the diagram is a group of nodes. Each row is a rectangular node. Is that accurate? – Winchester Mar 02 '23 at 06:57
  • It was a private project and I no longer have an access to it. – bumbeishvili Mar 02 '23 at 10:03

2 Answers2

1

I'm not sure this is still a problem, but if so, could you elaborate on what "row -> row" relationships are? Is that a strict definition on which nodes belong on which row? More recent versions of d3-dag support a rank criterion for nodes which specified relative ordering an equality constraints for a nodes row, but that may not be what you're looking for.

If you want to reposition just the edges, there may be way to pull out d3-dag's internals to just do the crossing minimization. Essentially d3 does what most layered layouts do, break an edge up to sections, and change the order of each edge in each row. After the ordering is set, it's easy to assign coordinates. If you can phrase your problem like that, you should be able to use code like this to phrase it as an integer linear program and find the optimal edge layout.

Erik
  • 6,470
  • 5
  • 36
  • 37
  • In the modified version, I did something like that, it was long ago though, don't exactly remember what I did and I no longer have access to a project. – bumbeishvili Mar 02 '23 at 10:07
0

I used d3-dag to topologically sort nodes, and then repositioned them vertically, top if odd and bottom if even

Although it's not an algorithm I was looking for, it improved the visual look of components dramatically and made much more readable

Old enter image description here

New enter image description here

Old enter image description here New enter image description here

Old enter image description here New enter image description here

bumbeishvili
  • 1,342
  • 14
  • 27