Nested nodes too far apart

[arsen-a]

I'm struggling with customizing the behavior of the Dagre layout when it comes to a huge set of nodes. I'm sending you a screenshot to show what I mean. Can this be customized? Look at the very last row of nodes and how much they are separated when they should be close since there are no descendants.

[not-anasali]

Facing the same issue. Have you had any luck solving it?

[arsen-a]

Facing the same issue. Have you had any luck solving it?

Moved to d3 🙂

[not-anasali]

@arsen-a d3-hierarchy with react flow?

[arsen-a]

@not-anasali vue-flow actually, but it comes down to the same thing

[zhoulingz]

@not-anasali vue-flow actually, but it comes down to the same thing

D3 doesn't have a similar example. Can you tell me which one you're using

[santhosh-c1]

I'm hitting this same issue. Look at node 2ab.

These are my nodes and edges:

import { Position } from "reactflow";

export const initialNodes = [
  {
    id: "1",
    type: "input",
    data: { label: "input" },
    sourcePosition: Position.Right,
    targetPosition: Position.Left,
    // position: { x: 0, y: 0 },
  },
  {
    id: "2",
    data: { label: "node 2" },
    sourcePosition: Position.Right,
    targetPosition: Position.Left,
    // position: { x: 0, y: 100 },
  },
  {
    id: "2a",
    data: { label: "node 2a" },
    sourcePosition: Position.Right,
    targetPosition: Position.Left,
    // position: { x: 0, y: 200 },
  },
  {
    id: "2b",
    data: { label: "node 2b" },
    sourcePosition: Position.Right,
    targetPosition: Position.Left,
    // position: { x: 0, y: 300 },
  },
  {
    id: "2c",
    data: { label: "node 2c" },
    sourcePosition: Position.Right,
    targetPosition: Position.Left,
    // position: { x: 0, y: 300 },
  },
  {
    id: "2aa",
    data: { label: "node 2aa" },
    sourcePosition: Position.Right,
    targetPosition: Position.Left,
    // position: { x: 0, y: 400 },
  },
  {
    id: "2ab",
    data: { label: "node 2ab" },
    sourcePosition: Position.Right,
    targetPosition: Position.Left,
    // position: { x: 0, y: 500 },
  },
  {
    id: "3",
    data: { label: "node 3" },
    sourcePosition: Position.Right,
    targetPosition: Position.Left,
    // position: { x: 200, y: 100 },
  },
  {
    id: "3a",
    data: { label: "node 3a" },
    sourcePosition: Position.Right,
    targetPosition: Position.Left,
    // position: { x: 0, y: 200 },
  },
  {
    id: "3b",
    data: { label: "node 3b" },
    sourcePosition: Position.Right,
    targetPosition: Position.Left,
    // position: { x: 0, y: 300 },
  },
  {
    id: "3aa",
    data: { label: "node 3aa" },
    sourcePosition: Position.Right,
    targetPosition: Position.Left,
    // position: { x: 0, y: 400 },
  },
];

export const initialEdges = [
  { id: "1", source: "1", target: "2", animated: true },
  { id: "2", source: "1", target: "3", animated: true },
  { id: "3", source: "2", target: "2a", animated: true },
  { id: "4", source: "2", target: "2b", animated: true },
  { id: "5", source: "2", target: "2c", animated: true },
  { id: "6", source: "2a", target: "2aa", animated: true },
  { id: "11", source: "2a", target: "2ab", animated: true },
  { id: "7", source: "3", target: "3a", animated: true },
  { id: "8", source: "3", target: "3b", animated: true },
  { id: "9", source: "3b", target: "3aa", animated: true },
];