JSFiddle - React, Tailwind, and code Playground

JavaScript

//Width and height
var w = 500;

var svg = d3.select("body")
  .append("svg")
  .attr("width", 100)
  .attr("height", 100);

svg.append("rect")
  .attr({
    x: 0,
    y: 0,
    height: 10,
    width: 10,
    fill: 'yellow'
  })
  .attr("sort", 3);
svg.append("rect")
  .attr({
    x: 0,
    y: 20,
    height: 10,
    width: 10,
    fill: 'red'
  })
  .attr("sort", 2);
svg.append("rect")
  .attr({
    x: 0,
    y: 40,
    height: 10,
    width: 10,
    fill: 'blue'
  })
  .attr("sort", 1);

var rects = d3.selectAll("rect")[0].sort(function(a, b) {
  return d3.select(a).attr("sort") - d3.select(b).attr("sort")
});
rects.forEach(function(rect, i){
	d3.select(rect).attr("y", (i*20))
})
console.log(rect)
/*d3.selectAll("rect")
.each(function(d,i){alert(d3.select(this).attr("sort"))});*/