как отсортировать выбор формы в d3

Question

Мне нужно изменить порядок всех форм, созданных d3 в контейнере svg. Но я не могу этого сделать. Следующий сценарий в JSFiddle, когда выполняется локально, дает «a и b не определен». Как его исправить?

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); 

d3.selectAll("rect").sort(function(a,b){return a.attr("sort")-b.attr("sort")}); 

d3.selectAll("rect") 
.each(function(d,i){alert(d3.select(this).attr("sort"))}); 

Answer 1

Вам нужно сортировать так:

var rects = d3.selectAll("rect")[0].sort(function(a, b) { 
    return d3.select(a).attr("sort") - d3.select(b).attr("sort") 
}); //here rects will store the correct sorted order rectangle DOMs. 

а не делать так:

d3.selectAll("rect").sort(function(a,b){return a.attr("sort")-b.attr("sort")}); 

Теперь, чтобы изменить прямоугольник как на подобное сделать так:

rects.forEach(function(rect, i){ 
    d3.select(rect).attr("y", (i*20));//change the attribute of y 
}) 

рабочий код here

ПРИМЕЧАНИЕ: Я просто отвечаю на это в соответствии с информацией, которую вы предоставили, но правильный подход - сделать это способом данных, предложенным @meetamit в комментарии.