如何根据树状结构中的元素数量查找元素 position？

Question

我正在寻找一种从 Flat Array 创建动态树状结构的解决方案。

样本输入 -> [1, 2, 3, 4, 5, 6, 7]

我能够确定的是需要的列数和行数。 但坚持为每个元素的 position 找到一个模式，以便它们可以以适当的间距定位。

** 在迭代期间我将获得列和索引信息

Ex1： Num 4 元素将 go 到第 3 列和第 2 行。

例 2 ：如果输入 position 中有 3 个元素将是->

第一个元素 -> 1 无列，2 无行

第二个元素 -> 2 无列和 1 无行

第三个元素 -> 2 无列和 3 无行

通过以下方式确定列数和行数 - >

getColumnLength() {
  if (this.list.length <= 1) {
    return 1;
  }
  if (this.list.length <= 3) {
    return 2;
  }
  for (let i = 2; i <= this.list.length; i++) {
    let columnLength = Math.pow(2, i);
    if (columnLength >= this.list.length) {
      return i;
    }
  }
},
getRowLength() {
  return Math.pow(2, this.getColumnLength) + 1;
},

任何建议都会很有帮助。

Answer 1

您还需要涵盖树不完美的情况，即树的叶子不在同一层上。 在这种情况下， getRowLength的计算是不正确的，因为它将计算一些仍然为空的行。 行数实际上是列表的大小：列表中的每个值都显示在它自己的行上，不需要其他行。

还有一个漂亮的Math.clz32方法，您可以使用它轻松获得数字中使用的位数。 这个位数很好地映射到列数。

中序遍历时可以获取单元格的行/列信息。

这是一个使用生成器进行这种有序遍历的演示。 该迭代器将产生当前访问值的 position 信息（ row和column ）：

 const tree = { * iterate(index=0, column=1, cursor={row: 1}) { if (index >= this.list.length) return; yield* this.iterate(index * 2 + 1, column + 1, cursor); yield { index, value: this.list[index], row: cursor.row++, column }; yield* this.iterate(index * 2 + 2, column + 1, cursor); }, getColumnLength() { return 32 - Math.clz32(this.list.length); }, displayInDOM(container) { // Demo that uses above iterate method container.innerHTML = `<table>${`<tr>${"<td></td>".repeat(this.getColumnLength())}<\/tr>`.repeat(this.list.length)}<\/table>`; const rows = container.children[0].rows; for (const {row, column, value} of this.iterate()) { rows[row - 1].cells[column - 1].textContent = value; } } } // Demo tree.list = [1,2,3,4,5,6,7,8,9]; tree.displayInDOM(document.querySelector("div"));

 table { border-collapse: collapse } td { vertical-align: middle; text-align: center; min-width: 24px; border: 1px solid; }

 <div></div>