我们有 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>
的末尾添加它.
请您参考如下方法:
我来晚了,但我想在此对话中添加 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”会使它上升。