Как реализовать древовидную диаграмму с реагирующей конвой или другими холст-библиотеками?

Question

Я использовал реагирующую библиотеку холста, чтобы нарисовать генограмму, и я хочу сделать что-то вроде эта функция

Но я застрял, потому что понятия не имею, как обращаться с логикой положения элемента (x и y).

Вот структура данных.

{
  p1: { level: 1, sex: 'F', partner: 'p2' },
  p2: { level: 1, sex: 'F', partner: 'p1' },
  p3: { level: 2, sex: 'M', parent: 'p1' },
  p4: { level: 2, sex: 'M', parent: 'p1' },
  p5: { level: 2, sex: 'M', parent: 'p1' }
}

Используемая в настоящее время логика x, y.

const getData = state => {
  const START_X = 100;
  const START_Y = 100;
  const X_INCREMENT = 20;
  const Y_INCREMENT = 20;
  const WIDTH = 20;
  const HEIGHT = 20;
  const groups = state.get('data').groupBy(el => el.get('level'))
  const data = groups.map((group, key) => {
    let xIndex = 0;
    return group.map(el => {
      let result = el
      result = result.set('x', START_X + xIndex * (X_INCREMENT + WIDTH))
      xIndex ++
      result = result.set('y', START_Y + result.get('level') * (Y_INCREMENT + HEIGHT))
      return result
    })
  }).toList().flatten(1);
  return data
};

Результат на этом изображении