Question

我们有HTML代码

<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>的末尾。

因此，我选择了必要的元素并将其删除。

imageView

不幸的是，我不知道如何在SDWebImage。

的末尾添加它

Answer 1

我参加这个派对已经很晚了，但我想在这个对话中添加D3 4.0中引入的新lower()和raise()函数。它非常简单：

selection.raise（）按顺序重新插入每个选定元素作为其最后一个子元素父节点。

和

selection.lower（）按顺序重新插入每个选定元素作为其中的第一个子元素父节点。

所以，你需要做的就是：

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

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

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

Answer 2

作为echonax的answer的替代方法，您可以重新附加已删除的DOM元素，而无需创建和追加新元素。如果此元素有许多属性，这会派上用场。

d3.select("#secondGrp").append(function() {
  return d3.select("option[value=Six]").remove().node();
});

d3.select("#secondGrp").append(function() {
  return d3.select("option[value=Six]").remove().node();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<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>

这利用了selection.remove()将返回已删除元素的选择这一事实。这是它的用例：

但是，您可以将函数传递给selection.append或selection.insert以重新添加元素。

Answer 3

结果如下：https://jsfiddle.net/bL6aavxr/1/

您可以使用属性选择器删除这样的值，不需要过滤器：

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

然后你可以用你喜欢的任何属性和文字“追加”你想要的选项：

d3.select("#secondGrp").append('option').attr("value", "Six").html("Six");

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

3 个答案: