Modifying the layout

[varghesep]

Thank you very much for the klayjs and klayjs-d3 library. I tried some of your examples and came up with the following JSON data to draw a graph.

My question is, what changes that I need to make to the following graph to achieve the layout that I want which I have shown in the last picture?

The changes that I want are:

1. n2 and n3 should be centered n1 in a layer up.
2. n4 and n5 should be connected to n1 and the should be aligned to the right. They should be horizontally with n1.

Thanks in advance.

{
  "id": "root",
  "labels": [ { "text": "root" } ],
  "properties": {
    "direction": "DOWN",
    "spacing": 5
  },
  "children": [
    {
      "id": "n1",
      "labels": [ { "text": "n1" } ],
      "properties": { "de.cau.cs.kieler.portConstraints": "FIXED_SIDE" },
      "width": 10,
      "height": 10,
      "ports": [
        {
          "id": "p1",
          "width": 0,
          "height": 0,
          "properties": { "de.cau.cs.kieler.portSide": "NORTH" }
        },
        {
          "id": "p5",
          "width": 0,
          "height": 0,
          "properties": { "de.cau.cs.kieler.portSide": "EAST" }
        }
      ]
    },
    {
      "id": "n2",
      "labels": [ { "text": "n2" } ],
      "properties": { "de.cau.cs.kieler.portConstraints": "FIXED_SIDE" },
      "width": 10,
      "height": 10,
      "ports": [
        {
          "id": "p2",
          "width": 0,
          "height": 0,
          "properties": { "de.cau.cs.kieler.portSide": "SOUTH" }
        }
      ]
    },
    {
      "id": "n3",
      "labels": [ { "text": "n3" } ],
      "properties": { "de.cau.cs.kieler.portConstraints": "FIXED_SIDE" },
      "width": 10,
      "height": 10,
      "ports": [
        {
          "id": "p3",
          "width": 0,
          "height": 0,
          "properties": { "de.cau.cs.kieler.portSide": "SOUTH" }
        }
      ]
    },
    {
      "id": "n4",
      "labels": [ { "text": "n4" } ],
      "properties": { "de.cau.cs.kieler.portConstraints": "FIXED_SIDE" },
      "width": 10,
      "height": 10,
      "ports": [
        {
          "id": "p4",
          "width": 0,
          "height": 0,
          "properties": { "de.cau.cs.kieler.portSide": "WEST" }
        }
      ]
    },
    {
      "id": "n5",
      "labels": [ { "text": "n5" } ],
      "properties": { "de.cau.cs.kieler.portConstraints": "FIXED_SIDE" },
      "width": 10,
      "height": 10,
      "ports": [
        {
          "id": "p6",
          "width": 0,
          "height": 0,
          "properties": { "de.cau.cs.kieler.portSide": "WEST" }
        }
      ]
    }
  ],
  "edges": [
    {
      "id": "e1",
      "source": "n1",
      "target": "n2",
      "sourcePort": "p1",
      "targetPort": "p2"
    },
    {
      "id": "e2",
      "source": "n1",
      "target": "n3",
      "sourcePort": "p1",
      "targetPort": "p3"
    },
    {
      "id": "e3",
      "source": "n1",
      "target": "n4",
      "sourcePort": "p5",
      "targetPort": "p4"
    },
    {
      "id": "e4",
      "source": "n1",
      "target": "n5",
      "sourcePort": "p5",
      "targetPort": "p6"
    }
  ]
}

This is how it looks like now:

This is the layout that I want:

[uruuru]

You can achieve a centered placement of n1 by either setting nodePlace: "NETWORK_SIMPLEX", or by setting (without the latter option) fixedAlignment: "BALANCED".

Your second wish is not supported. For a layout direction DOWN, nodes are placed in horizontal layers and no pair of connected nodes (by an edge) is allowed to be placed in the same layer. Apart from that I wonder if it's a good idea to route the edge connecting n1 and n4 behind n5.

[varghesep]

What I'm trying to achieve is a family tree like the below one.

Do you think I can achieve a tree like this one with KLayJS-D3?

[uruuru]

I guess you could create an auxiliary graph where you think of father+mother as a single node that is large enough and manually add the lines forming the T (red circle). Use two ports with fixed order on the top side to preserve the correct assignment.

Like so: