Дочерние узлы не содержатся в родительских узлах в elk- js

Question

Я пытаюсь передать свой JSON в elk-js/layout функцию и получить результирующий график, но в сгенерированном графике есть перекрытие. Мой Json root имеет 3 children, в которых два являются иерархическими узлами , каждый со своим собственным children. Третий - простой узел. Json прилагается после следующего абзаца.

Я бы хотел, чтобы сгенерированный граф имел трех дочерних узлов с простым узлом, зажатым между двумя другими по горизонтали, и с ребрами, соединяющими дочерние элементы любого иерархического узла и простой узел. Дочерние элементы в иерархических узлах должны содержаться внутри него в зависимости от расположения, как показано на изображении ниже. Однако в сгенерированном графике позиции x и y каждого дочернего узла, кроме простого узла, перекрывают друг друга в (0,0) и 2 строках по горизонтали и вертикали оттуда. Однако родительские узлы находятся в нужном месте вместе с ребрами, которые должны соединять их дочерние элементы (похоже, что дочерние узлы невидимы, но это не так, и они перекрываются в позиции (0,0).) В основном, дочерние узлы не содержатся в родительском узле. Довольно забавно, что код работает в онлайн-редакторе в реальном времени и генерирует график ниже, которого я ожидаю, даже в сгенерированном графике в моем коде. Что я мог упустить? Я подозреваю, может есть вариант, который может это исправить? Используемые параметры:

 {"elk.algorithm":                 "layered"
  "elk.hierarchyHandling":         "INCLUDE_CHILDREN"
  "spacing.nodeNodeBetweenLayers": 150.0}

Ожидаемый график должен выглядеть следующим образом:

ожидается

Мой json это,

{
  id: "root",
  layoutOptions: { 'algorithm': 'layered',
                   'hierarchyHandling': 'INCLUDE_CHILDREN',
                   'spacing.nodeNodeBetweenLayers': '100.0' },
  children: [
    {
        id:"analytics1",
        level: "cluster",
        name: "analytics1",
        children: [
            {
                id:"animate1",
                level: "leaf",
                height: 30,
                width: 30,
                parent: 1,
                labels: [{"text":"a"}]
            },
            {
                id:"animate2",
                level: "leaf",
                height: 30,
                width: 30,
                parent: 1,
                labels: [{"text":"b"}]
            },
            {
                id:"animate3",
                level: "leaf",
                height: 30,
                width: 30,
                parent: 1,
                labels: [{"text":"c"}]
            }
        ]
    },
    {
        id:"analytics2",
        level: "cluster",
        name: "analytics2",
        children: [
            {
                id:"animate6",
                level: "leaf",
                height: 30,
                width: 30,
                parent: 1,
                labels: [{"text":"f"}]
            },
            {
                id:"animate8",
                level: "leaf",
                height: 30,
                width: 30,
                parent: 1,
                "labels": [{"text":"h"}]
            }
        ]
    },
    {id: "n1", width: 30, height: 30, labels: [{text:"d"}]}
  ],
  edges: [
    {id: "e1", sources: ["animate2"], targets: ["n1"]},
    {id: "e2", sources: ["animate3"], targets: ["n1"]},
    {id: "e3", sources: ["animate1"], targets: ["n1"]},
    {id: "e4", sources: ["n1"], targets: ["animate8"]},
    {id: "e5", sources: ["n1"], targets: ["animate6"]},
  ]
}