如何根據樹狀結構中的元素數量查找元素 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>