0
我有一個d3貼圖,其中添加了一些圓圈和正方形。這些形狀代表來自不同年份的數據,並且我有一個選擇器允許用戶選擇年份,這通過一個函數(其中包括)爲他們提供類'.currentYear'來使得當年的形狀更加突出。有一個現場版本here.d3將元素從選擇器中帶到前面
我需要重新添加圓圈和rects與類'.currentYear'之後的其他人,以便他們出現在上面。我的(更詳細的)更新選擇器更改時的功能是:
d3.select("#yearSelector").on('change', yearTrans);
function yearTrans() {
selected = this.value;
rec.selectAll('.grant')
.filter('.currentYear')
.classed('currentYear', false)
.on('mouseover', tip.hide)
.transition().duration(1000)
.attr("r", rad/2)
.style("opacity", 0.8);
rec.selectAll('.grant')
.filter('.' + selected)
.classed('currentYear', true)
.transition().duration(1000)
.attr("r", rad)
.style("opacity", 1);
rec.selectAll('.award')
.filter('.currentYear')
.classed('currentYear', false)
.on('mouseover', tip.hide)
.transition().duration(1000)
.attr("x", function(d) { return proj([d.custom_fields.longitude - 40, d.custom_fields.latitude])[0] - (rad/2); })
.attr("y", function(d) { return proj([d.custom_fields.longitude, d.custom_fields.latitude])[1] - (rad/2); })
.attr("width", rad)
.attr("height", rad)
.style("opacity", 0.8);
rec.selectAll('.award')
.filter('.' + selected)
.classed('currentYear', true)
.transition().duration(1000)
.attr("x", function(d) { return proj([d.custom_fields.longitude - 40, d.custom_fields.latitude])[0] - (rad); })
.attr("y", function(d) { return proj([d.custom_fields.longitude, d.custom_fields.latitude])[1] - (rad); })
.attr("width", rad * 2)
.attr("height", rad * 2)
.style("opacity", 1);
rec.selectAll(".grant, .award")
.sort(function(a, b) {
if(a.memberOfClass(".currentYear") && !b.memberOfClass(".currentYear")) {
return -1;
} else if(b.memberOfClass(".currentYear")) {
return 1;
} else {
return 0;
}
});
rec.selectAll(".currentYear")
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
};
一種方法是選擇其父節點並重新追加它們。我遇到了一些使用這種方法的解決方案,例如this one,但它們總是處於mouseover狀態,我似乎無法使其在函數中工作。
另一種方法是對它們進行排序。我遇到了似乎是解決方案here,但我不明白在哪裏包括我的課程 - 我嘗試了所有我能想到的組合。該排序的相關代碼是
rec.selectAll(".grant, .award")
.sort(function(a, b) {
if(a.memberOfClass() && !b.memberOfClass()) {
return -1;
} else if(b.memberOfClass()) {
return 1;
} else {
return 0;
}
});
如何使用我的.currentYear類對它進行正確排序?
我覺得我應該能夠從我發現的東西中弄清楚,但我現在顯然缺乏這方面的知識。預先感謝您的幫助。
完美的輝煌,作品一種享受。萬分感謝您的快速準確回覆。 – tgerard