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

how to sort a shape selection in d3

本文关键字：选择 排序 d3      更新时间：2024-02-24

我需要更改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"))});

您需要这样排序：

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

此处为工作代码

注意：我只是根据您提供的信息回答这个问题，但正确的方法是按照@meetamit在评论中建议的数据方式进行。

相关文章：