我最终决定通过计算每个节点的位置并对其进行固定来解决该问题.

I finally decided to solve it by calculating positions of each node and fixing it.

确定形状和相应的大小以及每个节点所需的间距.

Decide shape and corresponding size, spacing required by each node.

已经定义了级别，以便为您提供每个节点的"y"坐标.

Level is already defined so that will give you 'y' co-ordinate of each node.

对于"x"坐标，假设每个节点需要30 px的空间，并且您希望在每侧保持5 px的边距，因此总计40 px.

And for 'x' co-ordinate, say each node require space of 30 px and you want to keep margin of 5px on each side, so total 40 px.

在每个级别上，对于每个节点，您需要计算绘制其所有子节点并进行递归操作所需的x空间(宽度).

At each level, for each node, you calculate how much x space (width) is required to draw all its child node and go on recursively.

在上面的示例中，R1需要x的宽度为200(40 * 5)px，因此只能在此之后或之前绘制M1和W1. R1可以在200 px宽度的中心绘制，我们可以通过分别使用40px来获得C1R1，C2R1，R2R2，W2R1和C3R1的位置.

In above example, R1 would need 200 (40*5) px width for x, so M1 and W1 can be drawn after or before that only. R1 can be drawn at center of 200 px width and we can get positions for C1R1, C2R1,R2R2, W2R1 and C3R1 by utilizing 40px for each.

如果我们从以下位置开始绘制:-200，0

If we start drawing at let's say: -200, 0

然后

M1 =>  x : -180, y : 0 (occupying space from -200 to -160)
R1 =>  x : -60, y : 0 (occupying space from -160 to 40)
W1 =>  x : 60, y: 0 (occupying space from 40 to 80)

C1R1 => -140, y: 40 (occupying space from -160 to -120)
C2R1 => -100, y: 40 (occupying space from -120 to -80)
R2R2 => -60, y: 40 (occupying space from -80 to -40)
W2R1 => -20, y: 40 (occupying space from -40 to 0)
C3R1 => 20, y: 40 (occupying space from 0 to 40)

让我知道您是否要我编写确切的代码.对我来说，这是非常不同的，因为我有不同大小的节点以及其他一些关系，等等.

Let me know if you want me to write exact code. It was very different for me, as I had different sizes of node and some other relationships etc