d3'te bir şekil seçimi nasıl sıralanır

Question

Bir svg kapsayıcısında d3 tarafından oluşturulan tüm şekillerin sırasını değiştirmem gerekiyor. Ama bunu yapamam. Yerel olarak yürütüldüğünde, aşağıdaki betik JSFiddle, "a ve b tanımlı değil" verir. Nasıl düzeltilmelidir?

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

Böyle sıralamak gerekiyor: Böyle yapmak tür uyarınca

Şimdi

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

dikdörtgen değiştirmek için:

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. 

yerine böyle yapmanın

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

çalışma kodu here

NOT: Yalnızca sağladığınız bilgiler uyarınca bunu yanıtlıyorum ancak doğru yaklaşım, yorumda @meetamit tarafından önerilen veri yöntemini yapmak olacaktır.