Javascript d3。选择。。。相当于jQuery.children（）

我使用d3在enter（）上附加一些元素，然后在以后更新它们。但是，下次我尝试选择这些元素时，选择的元素比原始元素大得多。这是因为原始选择元素现在具有相同类型的子元素，例如：<代码>，

。我希望selectAll（）只在第一个decedent级别工作，比如jQuery.children（）在d3中有等价物吗？如果没有，那么最有效的方法是什么？

没有与

jQuery.children（）

等效的方法。这通常是通过为要一起选择的元素指定一个区别类来处理的，例如，类似这样的东西

svg.selectAll("g").data(data)
   .enter()
   .append("g")
   .attr("class", "parent")
   .append("g")
   .attr("class", "child");

svg.selectAll("g"); // all g elements
svg.selectAll("g.parent"); // only parents
svg.selectAll("g.child"); // only children

---

下面是一个更好的方法：

var parent = d3.selectAll(".myParentClass");
parent.each(function(d,i) {            
   var children = d3.selectAll(this.childNodes);
   console.log(children);
});

---

通过这种方式，您无需向可能是100个（甚至更多）子节点添加不必要的类。

晚会迟到，但至少在

d3

version 4中，

selection.selectAll（）

可以使用一个函数，该函数的结果是一个数组，其中包含要根据上一次选择中的选定元素进行选择的新元素：

var parent = d3.selectAll(".myParentClass");
var children = parent
    //Convert selection to selection representing the children
    .selectAll(function() { return this.childNodes; })
    //Apply filter to children
    .filter('g')
    ;

---

与前面的答案相比，这种方法的主要好处是

selection.data（）

函数仍能正常工作。以前提出的方法是分配新的、单独的

d3.select（）调用的结果。

不允许这样做。

您也可以使用CSS选择器选择子对象。下面是我从索引中选择子项的步骤：

d3.select(`#${parentId} > *:nth-child(${index + 1})`)

所以我想这是可行的：

d3.selectAll(`#${parentId} > *`)

---

正如Lars所说，D3中没有与“children（）”方法等价的方法，但这里对我编写的D3.selection原型进行了一些扩展。我希望我能（这么晚）帮助你

---

谢谢，我最终用这个方法来标记我要寻找的节点。就性能而言，执行另一个select与类似于d3.select的东西相比如何（_u2;.filter（svg.parent（）.node（）.children，function（el）{return el.nodeName=='g'；}）？在我的情况下，DOM中可以有10k+节点，所以我有点偏执选择……D3使用通常的DOM选择器，所以不会有太多开销。在您的情况下，最好明确指定要选择的节点，但是在这两种方法之间切换并分析它们应该不会太繁重。如果我们想访问此的子级，该怎么办？

d3.select（this.some_class）

有效吗？只需添加另一个

.select（）

--

d3.select（this.select）（child）

。简单且有效，与其他答案一样有效。

d3.selection.prototype.children = function(d){
    var that = this.node();
    return this
        .selectAll(d)
        .filter(function(){ return that == this.parentNode; });
};