一个d3.select ...相当于jQuery.children()

Question

我正在使用d3在enter()上附加一些元素,然后再更新它们.但是,下次我尝试选择这些元素时,选择比原始元素大得多.这是因为原始选择元素现在具有相同类型的子元素,例如:<g>,<svg>.我希望selectAll()只能在jQuery这样的第一个死亡级别工作.孩子们()在d3中是否有等价物？如果不是什么最有效的方式来补充呢？

Answer 1

没有相当于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

Answer 2

这是一个更好的方法:

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

这样,您就不需要不必要地将类添加到可能是100个(或甚至更多)子节点的类中.