javascript - 如何在 d3 中对形状选择进行排序

Question

我需要更改 svg 容器中 d3 创建的所有形状的顺序。但我做不到。 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 在评论中建议的数据方式进行回答。