d3將元素從選擇器中帶到前面

Question

我有一個d3貼圖，其中添加了一些圓圈和正方形。這些形狀代表來自不同年份的數據，並且我有一個選擇器允許用戶選擇年份，這通過一個函數（其中包括）爲他們提供類'.currentYear'來使得當年的形狀更加突出。有一個現場版本here.

我需要重新添加圓圈和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類對它進行正確排序？

我覺得我應該能夠從我發現的東西中弄清楚，但我現在顯然缺乏這方面的知識。預先感謝您的幫助。

Answer 1

爲了使所選一年的元素在上面做這種方式：

，而不是你的排序代碼

rec.selectAll(".grant, .award") 
    .sort(function(a, b) { 
     if(a.memberOfClass() && !b.memberOfClass()) { 
     return -1; 
     } else if(b.memberOfClass()) { 
     return 1; 
     } else { 
     return 0; 
     } 
    }); 

添加該代碼，將追加在頂部的元素。

d3.selectAll("." + selected).each(function() 
{ 
    this.parentNode.parentNode.appendChild(this.parentNode) 
});