排序算法的可视化

Question

我正在尝试使用 d3.js 可视化排序算法，但我有点卡住了。当我尝试通过将其包含在排序循环中来重新绘制图形时。该图仅显示最终值。使用 setInterval 函数后发生了同样的事情。我在下面包含了没有所有 计时器函数 的脚本（不包括 settime 函数）

var arr = new Array(10, 34, 66, 3, 56, 45, 67, 43, 45, 7);
var wi = 500;
var he = 500;
var temp = 0;

//Scaling
var canvas = d3.select("body")
  .append("svg")
  .attr("width", wi)
  .attr("height", he);

for (l = 9; l > 0; l--) {

    for( p=0;p<l; p++){
                      if(arr[p]>arr[p+1]){
                          swap(p,arr);
                       
                                 
                         }
                      
                  }
  updatevisualization(arr);
}

function swap(n, arr) {
  temp = arr[n];
  arr[n] = arr[n + 1];
  arr[n + 1] = temp;
}

//visualizaiton
function updatevisualization(xx) {
  var bars = canvas.selectAll("rect")
    .data(xx)
    .enter()
    .append("rect")
    .attr("height", function(d) {
      return (5 * d);
    })
    .attr("width", 10)
    .attr("x", function(d, i) {
      return i * 20;
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

Answer 1

在您的代码中，您运行 setTimeout 函数和 updateVisualization 例程一次通过多次，这被视为即时操作，因为它基本上在亚秒级时间内运行，实际上不到一毫秒。

当排序算法的执行范围全部退出，JS开始事件循环的下一次循环。基本上它现在只是在休眠并等待外部事件和定时器事件。

最终，大约在 1000 毫秒后，JS 开始按照您使用 setTimeout 函数请求的方式安排所有排序算法步骤。屏幕永远不会更新，因为所有屏幕更新代码已经在第一个事件循环中与排序算法一起完成。

要按时安排更新，您可以将循环分成作业块，单独安排：

这是一大块工作应该做的：更新画面；如果需要下一步，执行该步骤并安排下一个块；

第一个块是手动启动的，它不是由前一个块调度的。

var startChunk = function(l) {
  updatevisualization(arr);
  if (l == 0) return;
  for (p = 0; p < l; p++) {
    if (arr[p] > arr[p + 1]) {
      swap(p, arr);
    }
  }
  setTimeout(function() {
    startChunk(l - 1);
  }, 1000);
};

// Schedule the first chunk
startChunk(9);

作为旁注，您应该使用 console.log("What's on at " + new Date()); 之类的工具来调试异步代码并了解发生了什么以及何时发生。

Answer 2

var arr = new Array(10, 34, 66, 3, 56, 45, 67, 43, 45, 7);
var wi = 500;
var he = 500;
var temp = 0;

//Scaling
var canvas = d3.select("body")
  .append("svg")
  .attr("width", wi)
  .attr("height", he);
updatevisualization(arr);

setTimeout(function(){
  var nAr = arr.sort(function(a,b){return a>b;});//Sorting numbers in ascending order
  canvas.html('');//removing old bars('rect's)
  update(nAr);//Creating bar('rect')s with new sorted array.
}, 1000);


/*
for (l = 9; l > 0; l--) {

      var myVar = setTimeout(function(){  for( p=0;p<l; p++){
                      if(arr[p]>arr[p+1]){
                          swap(p,arr);
                       
                                 
                         }
                      
                  }}, 1000);
  updatevisualization(arr);
}
*/


function swap(n, arr) {
  temp = arr[n];
  arr[n] = arr[n + 1];
  arr[n + 1] = temp;
}

//visualizaiton
function updatevisualization(xx) {
  var bars = canvas.selectAll("rect")
    .data(xx)
    .enter()
    .append("rect")
    .attr("height", function(d) {
      return (5 * d);
    })
    .attr("width", 10)
    .attr("x", function(d, i) {
      return i * 20;
    });
}

function update(numbers) {
canvas.selectAll('bar').data(arr).exit().remove();
  var selection = canvas
    .selectAll("bar").data(numbers);

  selection.enter()
    .append("rect")
    .attr("height", function(d) {
      return (5 * d);
    })
    .attr("width", 10)
    .attr("x", function(d, i) {
      return i * 20;
    });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

我刚刚添加了少量代码来对数组进行排序并再次创建元素。尝试观察代码。

Answer 3

其实这就是我要找的。从上面的答案中，我能够将所有东西放在一起 ;) :D

<!Doctype <!DOCTYPE html>
<html>

<head>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

  <title>Visualizer App Beta!!</title>
</head>


<body>

  <script>
    var arr = new Array(10, 34, 66, 3, 56, 45, 67, 43, 45, 7);
    var wi = 500;
    var he = 500;
    var temp = 0;
     // var pos=0;
     // draww(arr);
     //    var x= d3.scale.linear().domain([3-67]).range([3-he]);
    var canvas = d3.select("body")
      .append("svg")
      .attr("width", wi)
      .attr("height", he);


    var l = 9; //Scaling


    var startChunk = function(l) {
      //updatevisualization(arr);
      canvas.html('');
      update(arr);
      if (l == 0) return;
      for (p = 0; p < l; p++) {
        if (arr[p] > arr[p + 1]) {
          swap(p, arr);
        }
      }
      setTimeout(function() {
        startChunk(l - 1);
      }, 1000);
    };

     // Schedule the first chunk
    startChunk(9);





    function swap(n, arr) {

      temp = arr[n];
      arr[n] = arr[n + 1];
      arr[n + 1] = temp;


    }


   
     //visualizaiton

    function update(numbers) {
      canvas.selectAll('bar').data(arr).exit().remove();
      var selection = canvas
        .selectAll("bar").data(numbers);

      selection.enter()
        .append("rect")
        .attr("height", function(d) {
          return (5 * d);
        })
        .attr("width", 10)
        .attr("x", function(d, i) {
          return i * 20;
        });
    };
  </script>

</body>

</html>

排序算法的可视化

Visualisation of sorting algorithms

javascript

algorithm

sorting

d3.js

visualize