1

我正在尝试使用 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>

4

3 回答 3

0 

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>

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

于 2015-09-18T10:17:43.420 回答
0

在您的代码中，您在一次通过中多次运行 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());调试异步代码之类的东西并知道发生了什么以及何时发生。

于 2015-09-18T07:18:18.640 回答
0

实际上这是我一直在寻找的。从上面的 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>

于 2015-09-18T10:49:16.873 回答