Fixed distance between nodes (Help)

[jbcabreras]

Hi guys, hope everyone is doing well. Im currently working on a project that uses elkjs layered layout to create a workflow and have the following example:

I tried many different configurations but the problem is, as this layout works in layers, I could not find a way to have the same distance between nodes of 2 different layers probably because not all the nodes have the same height.

I wonder if you guys could give me a clue to help me solve this problem. Perhaps there is a property I missed in the documentation, or maybe another layout that works better in this situation, or even if its not possible at all.

Tks a lot!

[uruuru]

For the layered algorithm, the value nodeNodeBetweenLayers is applied between pairs of layers - even if the nodes of a single layer have different dimensions. Thus, your assumption regarding node height is correct.

There's no option to change this behavior. You can use the alignment option to decide where a (smaller) node is placed within a layer. Not sure if this is of any help though.

[jbcabreras]

Actually not, Im using it within the layer already. Is there any other layout type I could try to accomplish this? I dont actually need to have layers, I just need the nodes to respect some spacing between themselves.

[uruuru]

Judging from your initial example, I don't think so.

[jbcabreras]

Hello again and tks for quick replies! the image below is what we are trying to accomplish:

As we can see we have different node sizes and heights and for the design to look nice, we should have all the arrows with the same length. Another thing is we don have to respect layers as shown by the black lines, but instead perhaps set a rule like distance between nodes for example.

What do you think about this, is it feasible with elkjs? Do you have any ideas or maybe could point me to another direction or solution?

tks again

[brunaschneiders]

Hi, everyone! First of all, thanks for this amazing library.

I’m trying to use a different algorithm layout to solve this problem and I saw that with “mrtree” we have a layout without layers (as we want).

But, comparing with the “layered” algorithm, I’m having some issues.

For a better illustration, I created these 2 examples using ELK Editor :

• using the "layered" layout algorithm:

{
  id: "root",
  layoutOptions: {
    "algorithm": "layered",
    "elk.direction": "DOWN",
    "spacing.nodeNode": "30",
    "layered.spacing.nodeNodeBetweenLayers": "30",
    "edgeRouting": "POLYLINE",
    "crossingMinimization.semiInteractive":true
  },
  children: [
    {
      "id": "n1",
      "width": 50,
      "height": 50,
      labels:[{text:"n1"}],
      layoutOptions:{"position":"(1,0)"}
    },
    {
      "id": "n2",
      "width": 50,
      "height": 50,
      labels:[{text:"n2"}],
      layoutOptions:{"position":"(2,0)"}
    },
    {
      "id": "n3",
      "width": 50,
      "height": 50,
      labels:[{text:"n3"}],
     layoutOptions:{"position":"(3,0)"}
    },
    {
      "id": "n4",
      "width": 50,
      "height": 50,
      labels:[{text:"n4"}],
      layoutOptions:{"position":"(4,0)"}
    },
    {
      "id": "n5",
      "width": 50,
      "height": 50,
      labels:[{text:"n5"}],
      layoutOptions:{"position":"(5,0)"}
    }
  ],
  edges: [
    {
      "id": "e1",
      "sources": ["n1"],
      "targets": ["n2"],
    },
    {
      "id": "e2",
      "sources": ["n2"],
      "targets": ["n3"],
    },
    {
      "id": "e3",
      "sources": ["n1"],
      "targets": ["n4"],
    },
    {
      "id": "e4",
      "sources": ["n4"],
      "targets": ["n5"],
    },
    {
      "id": "e5",
      "sources": ["n3"],
      "targets": ["n5"],
    }
  ],
}

it produces this graph:

• using the "mrtree" layout algorithm:

  id: "root",
  layoutOptions: {
    "algorithm": "mrtree",
    "elk.direction": "DOWN",
    "spacing.nodeNode": "30",
    "crossingMinimization.semiInteractive":true
  },
  children: [
    {
      "id": "n1",
      "width": 50,
      "height": 50,
      labels:[{text:"n1"}],
      layoutOptions:{"priority":1}
    },
    {
      "id": "n2",
      "width": 50,
      "height": 50,
      labels:[{text:"n2"}],
      layoutOptions:{"priority":2}
    },
    {
      "id": "n3",
      "width": 50,
      "height": 50,
      labels:[{text:"n3"}],
      layoutOptions:{"priority":3}
    },
    {
      "id": "n4",
      "width": 50,
      "height": 50,
      labels:[{text:"n4"}],
      layoutOptions:{"priority":4}
    },
    {
      "id": "n5",
      "width": 50,
      "height": 50,
      labels:[{text:"n5"}],
      layoutOptions:{"priority":5}
    },
    {
      "id": "n6",
      "width": 50,
      "height": 50,
      labels:[{text:"n6"}],
      layoutOptions:{"priority":6}
    }
  ],
  edges: [
    {
      "id": "e1",
      "sources": ["n1"],
      "targets": ["n2"],
    },
    {
      "id": "e2",
      "sources": ["n2"],
      "targets": ["n3"],
    },
    {
      "id": "e3",
      "sources": ["n1"],
      "targets": ["n4"],
    },
    {
      "id": "e4",
      "sources": ["n4"],
      "targets": ["n5"],
    },
    {
      "id": "e5",
      "sources": ["n3"],
      "targets": ["n6"],
    },
    {
      "id": "e6",
      "sources": ["n5"],
      "targets": ["n6"],
    },
  ],
}

it produces this graphic:

So, let's go to the challenges:

1. With the "layered" algorithm, we can set an order priority for the nodes using the "position" attribute. So, as you can see, using this attribute, I can define which the nodes are on the left (n2 and n3) and which nodes are on the right (n4). How can we do the same when we are using the "mrtree" layout? I tried using the "priority" attribute, but it doesn't seem to make any difference in the result. What is the logic that Elkjs uses to define this order?

2. In the "layered" algorithm example, node "n5" is centered in relation to the previous nodes (n3 and n4) and it is the result that we need, but the same doesn't happen with the "mrtree" algorithm example, where the n6 are on the right and not on the center. Is there a way to achieve this result (n6 centered) using the "mrtree" algorithm?

@uruuru, @amcdnl, @boogiebug, @Vadorequest, can you please help us to find a solution?

Thanks!!

[soerendomroes]

@brunaschneiders 1: MrTree does currently not support this feature 2: The given graph is not a tree, therefore, MrTree does not consider that node might have multiple incoming connections.