在基数排序中可视化第二次迭代的问题

Posted 2023-02-22

【中文标题】在基数排序中可视化第二次迭代的问题

【英文标题】：Problem with visualize second iteraration in radix sort

【发布时间】：2021-07-28 17:33:09

【问题描述】：

我正在创建一个排序可视化项目。目前我正在使用基数排序算法。我将盒子的高度（分类项目以帮助可视化）限制为三位数。这意味着在基数排序中有三个迭代（首先我们对单位进行排序，然后是几十和几百）。当涉及到第二次迭代时，问题就出现了。我控制台记录了当前排序数组中项目的数字，它与它的高度匹配，但颜色可能完全不同，不知道为什么会这样。代码如下：

let sortingContainer = document.getElementById('sortingContainer')

const getDigit = (num, idx) => 
// Convert a number to string to know its length
let strNum = String(parseFloat(num.style.height))

let end = strNum.length - 1
let digit = strNum[end - idx]

if (digit === undefined) return '0'
return digit


const getDigitsNumber = (arr) => 
let largest = '0'

arr.forEach((num) => 
  let strNum = String(parseFloat(num.style.height))

  if (strNum.length > largest.length) 
    largest = strNum
  
)

return largest.length


const changeBgColor = (item, digit) => 
  switch (digit) 
  case '0':
    item.style.background = 'crimson'
    break
  case '1':
    item.style.background = 'orange'
    break
  case '2':
    item.style.background = 'yellow'
    break
  case '3':
    item.style.background = 'green'
    break
  case '4':
    item.style.background = 'blue'
    break
  case '5':
    item.style.background = 'indigo'
    break
  case '6':
    item.style.background = 'brown'
    break
  case '7':
    item.style.background = 'turqoise'
    break
  case '8':
    item.style.background = 'gray'
    break
  case '9':
    item.style.background = 'black'
    break
  default:
    break
 


const radixSort = async (arr) => 
  let maxDigits = getDigitsNumber(arr)

  for (let i = 0; i < maxDigits; i++) 
    let buckets = Array.from( length: 10 , () => [])
    for (let j = 0; j < arr.length; j++) 
      let digit = getDigit(arr[j], i)
      if (digit !== undefined) 
        buckets[digit].push(arr[j])
      
    

  arr = buckets.flat()

  // Update sorting container to change height of the items
  await new Promise((resolve) => 
    setTimeout(() => 
      arr.forEach((item) => 
        // Categorize and change background color of the item based on its current digit
        let digit = getDigit(item, i)
        changeBgColor(item, digit)
        sortingContainer.appendChild(item)
      )

      resolve()
    , 3000)
  )


// Once array is sorted (end of external for loop) change color of the items
await new Promise((resolve) => 
  setTimeout(() => 
    arr.forEach((item) => (item.style.background = 'limegreen'))
    resolve()
  , 2000)
)

return arr


export default radixSort

arr 数组是从主文件中填充的（它是对排序容器内项目的引用）。

这里是可视化。 第一次迭代很好

然后第二个坏了（蓝紫绿）

有趣的是，最后一次迭代是正确的（红色项目的高度

【问题讨论】：

我删除了我之前的评论（不再需要）。看起来你用你的答案解决了这个问题。能否包含生成测试数组的调用代码？

当然，给你。 const createSortingItem = () => const item = document.createElement('div') item.classList.add('sorting__item') item.style.width = $Math.floor(window.innerWidth / size.value)px` item.style.height = $ Math.floor(Math.random() * window.innerHeight * 0.45) + 5 pxsortingContainer.appendChild(item) const generateArray = () => clearArray() for (let i = 0; i

请注意，如果您有完整的 javascript 示例，您可以启用“run sn-p”，以便其他人可以看到代码工作。这将使用更正的代码进入您的答案。

【参考方案1】：

问题在于颜色名称。而不是“turqoise”，应该是“turquoise”。