使用 Javascript 的桶排序可视化

简介

桶排序是一种基于计数的排序算法，它通过将要排序的数据分割成几个“桶”，每个“桶”进行排序，最后将所有“桶”中的数据有序合并起来。它的时间复杂度为 O(n+k) ，其中n是待排序元素的个数，k是桶的数量。

在本文中，我们将使用 Javascript 编写桶排序算法，并将其可视化展示。

前置知识

在学习本文之前，需要具备以下基础知识：

• Javascript 基础语法
• HTML、CSS 基础知识

实现思路

1. 将待排序数组中的元素放入对应的桶中。
2. 每个桶中的元素进行插入排序。
3. 将每个桶中的元素按顺序合并成一个有序数组。

代码实现

function bucketSort(array, bucketSize = 5) {
  if (array.length === 0) {
    return array;
  }

  // 获取最小值和最大值
  const minValue = Math.min(...array);
  const maxValue = Math.max(...array);

  // 计算桶的数量
  const bucketCount = Math.floor((maxValue - minValue) / bucketSize) + 1;
  const buckets = new Array(bucketCount);

  // 初始化桶
  for (let i = 0; i < buckets.length; i++) {
    buckets[i] = [];
  }

  // 将元素放入桶中
  for (let i = 0; i < array.length; i++) {
    const bucketIndex = Math.floor((array[i] - minValue) / bucketSize);
    buckets[bucketIndex].push(array[i]);
  }

  // 对每个桶中的元素进行插入排序
  for (let i = 0; i < buckets.length; i++) {
    buckets[i].sort((a, b) => a - b);
  }

  // 合并桶中的元素
  let result = [];
  for (let i = 0; i < buckets.length; i++) {
    result = result.concat(buckets[i]);
  }

  return result;
}

可视化实现

我们通过 Web 技术，将桶排序算法可视化展示出来。这里我们使用 HTML、CSS 和 Javascript 进行开发。

<!-- HTML -->

<div class="container">
  <div class="input-container">
    <label for="input-array">请输入需要排序的数组：</label>
    <input type="text" id="input-array">
  </div>

  <div class="button-container">
    <button onclick="sort()">排序</button>
  </div>

  <div class="chart-container">
    <svg id="chart"></svg>
  </div>
</div>

/* CSS */

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-container,
.button-container {
  margin-top: 20px;
}

.input-container label {
  margin-right: 10px;
}

.button-container button {
  font-size: 16px;
  padding: 10px;
  border: none;
  background-color: #4caf50;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

.chart-container {
  margin-top: 20px;
}

// Javascript

const chart = document.querySelector('#chart');

let dataArray = [];

function drawChart() {
  const chartWidth = 500;
  const chartHeight = 300;
  const rectWidth = chartWidth / dataArray.length;

  chart.setAttribute('width', chartWidth);
  chart.setAttribute('height', chartHeight);

  const rectElements = chart.querySelectorAll('rect');
  rectElements.forEach(el => el.remove());

  for (let i = 0; i < dataArray.length; i++) {
    const rectHeight = chartHeight * dataArray[i] / 100;
    const rectX = i * rectWidth;
    const rectY = chartHeight - rectHeight;

    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    rect.setAttribute('x', rectX);
    rect.setAttribute('y', rectY);
    rect.setAttribute('width', rectWidth);
    rect.setAttribute('height', rectHeight);
    rect.setAttribute('fill', '#4caf50');

    chart.appendChild(rect);
  }
}

function sort() {
  const inputArray = document.querySelector('#input-array').value;
  dataArray = inputArray.split(',').map(Number);

  const sortedArray = bucketSort(dataArray);

  for (let i = 0; i < dataArray.length; i++) {
    dataArray[i] = Math.ceil((dataArray[i] / 100) * 100);
  }

  drawChart();
}

演示效果

在本地通过浏览器打开上述 HTML 文件，即可看到可视化的桶排序效果。

总结

本文介绍了 Javascript 桶排序算法以及如何通过 Web 技术将其可视化展示出来。通过可视化，可以更形象地展示算法的工作原理和过程，帮助程序员更好地理解和掌握。