绘制特定图形的算法

Question

我正在以编程方式绘制图形。它具有以下属性：

  

1它没有循环

     

2个节点最多可以有4个子节点

我想很好地画出没有交叉点的东西。

我提出了以下算法：

从右到左绘制图形，其中最右边的节点是最低的，最左边的节点是根。在将拆分节点绘制到层之前。其中0级是根，1级是作为根的子代的节点，2级是作为根的子代的节点，依此类推。

首先绘制最后一个关卡（只需在关卡中的第一个节点的任何x位置和y位置开始，并在关卡上绘制节点时递增y位置）。完成绘制最后一个关卡后，请更改x位置（每个关卡都有一个单独的x位置，该位置对于该关卡中的每个节点均相等，但与另一个关卡中的每个x位置不同），继续移动到最后一个关卡之前的关卡。在这里，对于每个节点，我们都可以访问子节点，并知道它们在上一步中设置的（子节点）位置。因此，只需取具有最小y值的子节点的位置和具有最大y值的位置，对其取平均值，结果将是当前节点的y位置的值。

使用相同的方法将所有节点拖到左侧。

以下是使用我提出的算法绘制的图形示例：

在这种情况下，如果我们在最后一个之前的级别上拥有所有子节点，但如果我们绘制一个图形，其中先前（而非最后一个）级别上的节点没有子节点，则我的算法创建了交集。这是一个示例：

请帮助我解决我确实非常困惑的问题。

我正在使用d3.js v5.4.0绘制图形。为了绘制图形，我给了我一个节点，对于每个节点，我得到了一个前一个（左边的节点）和下一个（右边的节点）数组。