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建议的数据方式进行。

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

1 个答案: