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

Question

我正在使用 d3 在 enter() 上附加一些元素，然后再更新它们。但是，下次我尝试选择这些元素时，选择比原来的要大得多。这是因为原来的选择元素现在有相同类型的子元素，例如；<g>, <svg>. 我希望 selectAll() 只能在像 jQuery.children() 这样的第一个死者级别上工作，在 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 个（甚至更多）的子节点中。

Answer 3

您也可以仅使用 CSS 选择器选择子项。这是我从索引中选择子项的操作：

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

所以我想这可行：

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

Answer 4

晚会，但至少在d3版本 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()调用中分配结果，不允许这样做。

Answer 5

就像 Lars 说的，在 D3 中没有等效于 'children()' 的方法，但这里对我编写的 d3.selection 原型进行了一点扩展。我希望必须帮助你（这么晚了）。

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