javascript - 将所选元素移动到末尾

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() Re-inserts each selected element, in order, as the last child of its parent.

和:

selection.lower() Re-inserts each selected element, in order, as the first child of its parent.

所以，您需要做的就是:

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

检查这个 fiddle ，您可以单击按钮并查看它的上升和下降:https://jsfiddle.net/gerardofurtado/omk8r7dh/

这里的名称有点困惑，因为“raise”会使“6”在列表中下降，而“lower”会使它上升。