以降序对随机生成的 SVG 进行排序

Question

目前我的 javascript 是这样的：

var svgns = "http://www.w3.org/2000/svg";
for (var i = 0; i < 100; i++) {
  var x = (Math.floor(Math.random() * 100) + 1)

  var rect = document.createElementNS(svgns, 'rect');
  rect.setAttributeNS(null, 'height', x);
  rect.setAttributeNS(null, 'width', x);
  rect.setAttributeNS(null, 'stroke-width', '5')
  rect.setAttributeNS(null, 'fill', 'red');
  rect.setAttributeNS(null, 'stroke', 'black');
  document.getElementById('svgSquare').appendChild(rect);
}

我的 HTML 是这样的：

<svg id="svgSquare"></svg>

这段代码显示了我想要的正方形的数量，但是它将它们堆叠在一起，它们都从同一点开始。如何获取由此 for 循环生成的随机方块并以堆叠的降序显示它们。目前不确定该去哪里，也不确定我是否问对了问题。

Answer 1

您可以创建随机的arr，然后使用arr.sort()，然后循环遍历排序的arr，并为每种尺寸添加rect 到svg 并在X 方向和Y 方向交替偏移到创造这种模式？：

这也是这个 JSFiddle 中的代码 - http://jsfiddle.net/alexander_L/q5umrgnv/41/:

$(document).ready(function(){
  var svgns = "http://www.w3.org/2000/svg";
  var offsetY = 0;
  var offsetX = 0;
  var arr = [0];
  for (var i = 1; i <= 100; i++) {
    var x = (Math.floor(Math.random() * 100) + 1)    
    arr.push(x);
  }  
  //sort the array ascending:
  arr.sort((a, b) => a - b);

  for (var i = 0; i < 100; i++) {  
    var x = arr[i];
    console.log(i, x);
    var rect = document.createElementNS(svgns, 'rect');
    rect.setAttributeNS(null, 'y', offsetY);
    rect.setAttributeNS(null, 'x', offsetX);
    rect.setAttributeNS(null, 'height', x);
    rect.setAttributeNS(null, 'width', x);
    rect.setAttributeNS(null, 'stroke-width', '5')
    rect.setAttributeNS(null, 'fill', 'red');
    rect.setAttributeNS(null, 'stroke', 'black');
    document.getElementById('svgSquare').appendChild(rect);
    if (i % 2 == 0){
      offsetY += x;
    } else {
      offsetX += x;
    }

    document.getElementById('svgSquare').setAttribute("height", (offsetY + x) + "px");
    document.getElementById('svgSquare').setAttribute("width", (offsetX + x) + "px");

  }
});