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

实际上这是我在寻找的。从上面的Aswers我能够得到的东西;）：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>

可视化排序算法

3 个答案: