d3 js将所选元素移动到最后

Question

我们有HTML代码

<select id="mySelect">
 <optgroup label="First group" id="firstGrp">
   <option value="One">One</option>
   <option value="Two">Two</option>
</optgroup>
 <optgroup label="Second group" id="secondGrp">
   <option value="Three">Three</option>
   <option value="Six">Six</option>
   <option value="Four">Four</option>
   <option value="Five">Five</option>
 </optgroup>
</select>

我想要<option value="Six">Six</option>走到尽头<optgroup label="Second group" id="secondGrp">.

所以,我选择必要的元素并将其删除.

var secondGrp = d3.selectAll("#secondGrp option");
var six = secondGrp.filter(function(d, i){ return d === "Six")})
six.remove();

不幸的是,我不知道如何在最后添加它<option value="Six">Six</option>.

Answer 1

我迟到了这个派对,但是我想在这个对话中添加D3 4.0中引入的新功能lower()和raise()功能.它非常简单:

selection.raise()按顺序重新插入每个选定元素作为其父元素的最后一个子元素.

和:

selection.lower()按顺序重新插入每个选定元素作为其父元素的第一个子元素.

所以,你需要做的就是:

d3.select("[value='Six']").raise();

检查这个小提琴,你可以点击按钮,看看它上下:https://jsfiddle.net/gerardofurtado/omk8r7dh/

这里的名字有点令人困惑,因为"加注"会使"六"在列表中下降,"下限"会使它上升.