Buchheimのツリー描画アルゴリズムを理解したい。

Question

Buchheim's Algorithm

Buchheimのアルゴリズムは、このツリー構造の描画アルゴリズムの進化の歴史についての文章によると、最も新しく(2002年)、描画の美しさ、オーダー(O(n))ともに優れたものらしいです。

pseudo codeはこの元論文のappendixにあり、また先ほどの文章のgithub repositoryにはこのpython実装があります。

JavaScriptで理解したい。。。

このアルゴリズムを理解したいのですが、手元で試せる実装がなく、またまだ理解していないので実装もできず困っています。

現在地

今は描画部分をVue.jsを用いてつくり、あとは各nodeのx座標をこのBuchheim's algorithmを用いて更新すればよいというところまでは来たのですが、肝心のアルゴリズムの中身を実装できていません。

お願いしたいこと

以下に描画部分を担当するVueのコードがあるので、空白になっている__Buchheim()__を実装していただけませんか？
それをもとに学ばせていただきたいと思います。

Vue code

TreeGUI.vue

<template>
<div>
  <svg x="0px" y="0px" width="1000px" height="1000px" viewBox="0 0 1000 1000">
    <NodeGUI
      v-for="node in data.nodes"
      :key="node.id"
      :node="node"
      @addChild="addNode"
    />
  </svg>
</div>
</template>

<script>
import NodeGUI from './NodeGUI';

class Node {
  constructor (parent) {
    // Area of the whole node object, including the rectangle, add button and etc.
    this.totalWidth = 100;
    this.totalHeight = 80;
    
    // (x, y) that will be caluclated
    this.x = -1;
    let spacer = 10;
    this.y = (parent) ? parent.y + this.totalHeight + spacer: 0;
    
    this.parent = parent;
    this.children = [];
    
    // 以下のpropertyは論文にそったつもりですが、間違っているかもしれません。
    // ですので、変更頂いて一向にかまいません！
    this.thread = null;
    this.mod = 0;
    this.ancestor = this;
    this.shift = 0;
    this.change = 0;
    this._lmostSibling = null;

    if (!parent) {
      this.number = 1;
    }
    else {
      this.number = this.parent.numOfChildren; 
    }
  }
}

// +++++++++++++++++++++++++++++++++++++
// Tree Positioning Algorithm
// This will update x-coordinate of each node
// function buchheim(node) {
//   
// }
// +++++++++++++++++++++++++++++++++++++

export default {
  name: 'TreeGUI',

  components: {
    NodeGUI
  },

  data () {
    return {
      data: {
        // Nodes of the tree
        nodes: [
          new Node(null)
        ]
      }
    }
  },

  methods: {
    addNode (parentNode) {

      let newNode = new Node(parentNode);

      parentNode.children.push(newNode);
      this.data.nodes.push(newNode);
      
      // Update positioning of each node, every time when new node is added
      // buchheim(this.data.nodes[0]);
    }
  }
}
</script>

NodeGUI.vue

<template>
  <g 
    :transform="transform"
    fill="none" stroke="#4B4B4B" :stroke-width="strokeWidth"  
  >
    <rect 
      x="0" y="0"
      :width="width" :height="height" 
      rx="10" ry="10"
    />

    <line
      :x1="width/2" :y1="height"
      :x2="width/2" :y2="height+lineLength"
    />

    <g @click="addChild">
      <circle
        :cx="width/2" :cy="height+2*lineLength" :r="radius"
      />
      <line
        :x1="width/2-(radius/2)" :y1="height+2*lineLength"
        :x2="width/2+(radius/2)" :y2="height+2*lineLength"
      />
      <line
        :x1="width/2" :y1="height+2*lineLength-(radius/2)"
        :x2="width/2" :y2="height+2*lineLength+(radius/2)"
      />
    </g>
  </g>

</template>

<script>
export default {
  name: 'NodeGUI',

  props: [
    'node'
  ],

  data () {
    return {
      strokeWidth: this.node.totalWidth/20,
      width: this.node.totalWidth,
      height: this.node.totalHeight-(3*this.node.totalWidth/10),
      radius: this.node.totalWidth/10,
      lineLength: this.node.totalWidth/10
    }
  },

  computed: {
    transform () {
      return `translate(${this.node.x},${this.node.y})`;
    }
  },

  methods: {
    addChild () {
      this.$emit('addChild', this.node);
    }
  }
}
</script>